🙋 Feature Request

Add flags to the CLI

🤔 Expected Behavior

Users can set their information as flags so they can skip the process of pressing enters several times.

😯 Current Behavior

There is no way to create-liff-app without pressing enters.

💁 Possible Solution

There can be flags or args of all parameters. This is just an example ↓

npx @line/create-liff-app <app_name> 

1st argument: app_name
-t or --template: template_name
--js: use JavaScript
--ts: use TypeScript
-l or --liffid: liff_id
--yarn: use yarn
--npm: use npm
-h or --help: tooltips for the create-liff-app
-v or --version: version of create-liff-app

We may use libraries like commander or yargs to implement this.

💻 Examples

You can check the create-next-app implementation. https://github.com/vercel/next.js/blob/canary/packages/create-next-app/index.ts

Fixes https://github.com/line/create-liff-app/issues/11

This PR changes how create-liff-app install dependencies, ensuring that all dependencies used in generated projects are up-to-date. I'm not sure if this is fixing the issue or making it even worse, any feedback would be great🙏

Changes:

• .eslinerc.js
  • removed 'linebreak-style': ['error', 'unix'] since all the linebreaks are in CRLF
• removed dependencies and devDependencies fields in every package.json in /templates (except for nuxtjs templates)
• removed @line/create-liff-app upgradation script
• create-liff-app.ts
  • added templates object in the end of the file to store all the dependencies used by different frameworks
  • moved envPrefix and envFileNameVariants into templates object
  • install function now installs dependencies from templates object in runtime

Problems that need to be discussed:

• (not related to this PR) nuxtjs projects generated by the current version(1.0.4) of create-liff-app do not work as expected, as it always throws this error: Error: liffId is necessary for liff.init(). I do not know how to fix that.
• under the current refactor, when a user selects no on the question install now, create-liff-app will first run npm install --package-lock-only to install the latest version of the packages without actually saving them to the node_modules, then use fs.rmSync to delete the generated package-lock.json. I do not think this is a good way of handling the problem and maybe it needs to be replaced? Below are two possible fixes that I came up with. What do you think?
  • remove the install now option and install the dependencies by default list create-next-app does. This is lesserror-prone.
  • bring back dependencies and devDependencies fields in every package.json in /templates. Use them to generate outdated dependencies as it does in the current version(1.0.4) of create-liff-app, then remind the user to upgrade the dependencies in the showDoneComments function.

Notes:

• Nuxtjs
  • dependencies used in create-nuxt-app are hardcoded into package.json, so this refactor followed the conversion and only @line/liff is installed in the runtime

Hi, I really enjoy using this package to quickly generate liff projects, but I found some issues with outdated dependencies.

Currently, dependencies are hardcoded into package.jsons and some have already become outdated. I looked into how create-next-app handles this issue and found that they install all the dependencies using spawn in runtime to get the latest versions of dependencies. Below is a demonstration of how they do it: (source code)

const dependencies = ['react', 'react-dom', 'next'];
spawn(packageManager, dependencies);

You'll gain two benefits from implementing this method:

1. Manual updates of the liff package are no longer needed
2. Up-to-date dependencies

If you think this is a good idea, just let me know and I could try to make a PR for this. Btw, all the linebreaks in this project are CRLF, not LF as defined in .eslint.js. And there is no configuration file for installed dev-dependency prettier.

Add flags to the CLI (https://github.com/line/create-liff-app/issues/19)

I added some flag descriptions, but I am unsure if they sound natural (I am not a native speaker). Please double-check the descriptions in README.md and the CLI help message!

Changes:

• create-liff-app now accepts one optional argument and various flags: @line/create-liff-app [project name] [options].
• After running @line/create-liff-app -h, will print the following help message:

Usage: @line/create-liff-app [project name] [options]

Options:
  -v, --version              output the version number
  -t, --template <template>  Choose a template to bootstrap the app with (choices: "vanilla", "react", "vue", "svelte", "nextjs", "nuxtjs")
  -l, --liffid <liff id>     Liff id. For more information, please visit https://developers.line.biz/ja/docs/liff/getting-started/
  --js, --javascript         Initialize as a JavaScript project
  --ts, --typescript         Initialize as a TypeScript project
  --npm, --use-npm           Bootstrap the app using npm
  --yarn, --use-yarn         Bootstrap the app using yarn
  -h, --help                 display help for command

NOTE:

The answers object currently has no type, as I do not know how to automatically infer the values from questions. Rather than explicitly create a type for it I decided to leave it like that since answers will not be referenced by anything. But still, I'll make it full type-safe if that sounds better to you.

In liff-playground, LIFF.init is called before DOM.render, but in the template of create-liff-app, LIFF.init is called in useEffect. Which is better?

liff-playground https://github.com/line/liff-playground/blob/master/src/index.tsx

create-liff-app template https://github.com/line/create-liff-app/blob/main/templates/react-ts/src/App.tsx

Closes #20

✅ Pull Request Checklist:

• [x] Included link to corresponding GitHub Issue.
• [x] Filled out test instructions.

📝 Test Instructions:

• install both nuxtjs-ts/nuxtjs templates and see if there is no lint / ts error.

🐛 Bug Report

🤔 Expected Behavior

• No TS error emission
• No lint errors

😯 Current Behavior

Property '$liffInit' does not exist on type 'CombinedVueInstance<Vue, { message: string; error: string; }, unknown, unknown, Readonly<Record<never, any>>>'.

💁 Possible Solution

• Lint template files as create-nuxt-app way.
• Add TypeScript setting for the liffPlugin (https://typescript.nuxtjs.org/ja/cookbook/plugins/)

Unlike other frameworks, projects generated by create-next-app use .env.local instead of .env. This can be verified by the fact that the .gitignore in the next.js template does not include .env.

This PR updates the generator to generate .env.local instead of .env for next.js projects.

Bumps minimist from 1.2.5 to 1.2.6.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

process.env.LIFF_ID in NEXT is incorrect. When I access the URL, the following error was displayed.

LIFF init failed. Error: liffId is necessary for liff.init()

So fixed it.

🙋 Feature Request

• As Vite 3 was released, we need to change current templates to the newer version.
• React / Vue / Svelte and Vanilla templates

💁 Possible Solution

• Use the Vite command internally as NextJS / NuxtJS templates do

💻 Examples

• You can check how NextJS / NuxtJS projects are created: https://github.com/line/create-liff-app/pull/15

🙋 Feature Request

Setup CI / CD settings

🤔 Expected Behavior

• run test
• run lint
• run deploy

😯 Current Behavior

• no CI / CD are implemented

💁 Possible Solution

• add CI settings to the project

🔦 Context

https://github.com/line/create-liff-app/pull/15#pullrequestreview-999023927

💻 Examples