├── .eslintignore ├── .eslintrc.js ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── Bug_Report.md │ └── Feature_Request.md ├── PULL_REQUEST_TEMPLATE.md ├── release-drafter.yml └── workflows │ ├── code-check.yml │ ├── publish.yml │ └── release-drafter.yml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.txt ├── README.md ├── create-liff-app.ts ├── index.ts ├── jest.config.js ├── package.json ├── templates ├── nextjs-ts │ ├── pages │ │ ├── _app.tsx │ │ └── index.tsx │ ├── public │ │ └── favicon.ico │ └── styles │ │ ├── Home.module.css │ │ └── globals.css ├── nextjs │ ├── pages │ │ ├── _app.js │ │ └── index.js │ ├── public │ │ └── favicon.ico │ └── styles │ │ ├── Home.module.css │ │ └── globals.css ├── nuxtjs-ts │ ├── .eslintrc.js │ ├── index.d.ts │ ├── nuxt.config.js │ ├── pages │ │ └── index.vue │ ├── plugins │ │ └── liff-init.client.ts │ └── static │ │ └── favicon.ico ├── nuxtjs │ ├── .eslintrc.js │ ├── nuxt.config.js │ ├── pages │ │ └── index.vue │ ├── plugins │ │ └── liff-init.client.js │ └── static │ │ └── favicon.ico ├── react-ts │ ├── .gitignore.default │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── favicon.ico │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ └── vite.config.ts ├── react │ ├── .gitignore.default │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── favicon.ico │ │ └── main.jsx │ └── vite.config.js ├── svelte-ts │ ├── .gitignore.default │ ├── .vscode │ │ └── extensions.json │ ├── index.html │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.svelte │ │ ├── main.ts │ │ └── vite-env.d.ts │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.js ├── svelte │ ├── .gitignore.default │ ├── .vscode │ │ └── extensions.json │ ├── index.html │ ├── jsconfig.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.svelte │ │ ├── main.js │ │ └── vite-env.d.ts │ └── vite.config.js ├── vanilla-ts │ ├── .gitignore.default │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── src │ │ ├── main.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ └── tsconfig.json ├── vanilla │ ├── .gitignore.default │ ├── favicon.ico │ ├── index.html │ ├── main.js │ ├── package.json │ └── style.css ├── vue-ts │ ├── .gitignore.default │ ├── .vscode │ │ └── extensions.json │ ├── index.html │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── env.d.ts │ │ └── main.ts │ ├── tsconfig.json │ └── vite.config.ts └── vue │ ├── .gitignore.default │ ├── .vscode │ └── extensions.json │ ├── index.html │ ├── package.json │ ├── public │ └── favicon.ico │ ├── src │ ├── App.vue │ └── main.js │ └── vite.config.js ├── test └── index.test.ts ├── tsconfig.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | # Since templates below has there own eslintrc 3 | templates/nextjs 4 | templates/nextjs-ts 5 | templates/nuxtjs 6 | templates/nuxtjs-ts 7 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | node: true, 6 | }, 7 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:jest/recommended', 'prettier'], 8 | parser: '@typescript-eslint/parser', 9 | parserOptions: { 10 | ecmaVersion: 'latest', 11 | sourceType: 'module' 12 | }, 13 | plugins: ['@typescript-eslint', 'jest'], 14 | rules: { 15 | indent: ['error', 2], 16 | quotes: ['error', 'single'], 17 | semi: ['error', 'always'], 18 | '@typescript-eslint/no-var-requires': ['off'], 19 | 'jest/no-disabled-tests': 'warn', 20 | 'jest/no-focused-tests': 'error', 21 | 'jest/no-identical-title': 'error', 22 | 'jest/prefer-to-have-length': 'warn', 23 | 'jest/valid-expect': 'error' 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @line/liff 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Bug_Report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🐛 Bug Report 3 | about: Did something not work as expected? 4 | --- 5 | 6 | 11 | 12 | # 🐛 Bug Report 13 | 14 | 15 | 16 | ## 🤔 Expected Behavior 17 | 18 | 19 | 20 | ## 😯 Current Behavior 21 | 22 | 23 | 24 | ## 💁 Possible Solution 25 | 26 | 27 | 28 | ## 🔦 Context 29 | 30 | 31 | 32 | 33 | 34 | ## 💻 Code Sample 35 | 36 | 37 | 38 | ## 🌍 Your Environment 39 | 40 | 41 | 42 | ## 🕷 Tracking Issue (optional) 43 | 44 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Feature_Request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🙋 Feature Request 3 | about: Want to add a feature to create-liff-app? 4 | --- 5 | 6 | 11 | 12 | # 🙋 Feature Request 13 | 14 | 15 | 16 | ## 🤔 Expected Behavior 17 | 18 | 19 | 20 | ## 😯 Current Behavior 21 | 22 | 23 | 24 | ## 💁 Possible Solution 25 | 26 | 27 | 28 | ## 🔦 Context 29 | 30 | 31 | 32 | 33 | 34 | ## 💻 Examples 35 | 36 | 37 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Closes 2 | 3 | ## ✅ Pull Request Checklist: 4 | 5 | - [ ] Included link to corresponding [GitHub Issue](https://github.com/line/create-liff-app/issues). 6 | - [ ] Filled out test instructions. 7 | 8 | ## 📝 Test Instructions: 9 | 10 | -------------------------------------------------------------------------------- /.github/release-drafter.yml: -------------------------------------------------------------------------------- 1 | name-template: 'v$RESOLVED_VERSION' 2 | tag-template: 'v$RESOLVED_VERSION' 3 | template: | 4 | # What's Changed 5 | $CHANGES 6 | 7 | **Full Changelog**: https://github.com/$OWNER/$REPOSITORY/compare/$PREVIOUS_TAG...v$RESOLVED_VERSION 8 | commitish: refs/heads/main 9 | 10 | categories: 11 | - title: 'Breaking' 12 | label: 'type: breaking' 13 | - title: 'New' 14 | label: 'type: feature' 15 | - title: 'Bug Fixes' 16 | label: 'type: bug' 17 | - title: 'Maintenance' 18 | label: 'type: maintenance' 19 | - title: 'Documentation' 20 | label: 'type: documentation' 21 | - title: 'Dependency Updates' 22 | label: 'dependencies' 23 | collapse-after: 5 24 | - title: 'Other changes' 25 | 26 | version-resolver: 27 | major: 28 | labels: 29 | - 'type: breaking' 30 | minor: 31 | labels: 32 | - 'type: feature' 33 | patch: 34 | labels: 35 | - 'type: bug' 36 | - 'type: maintenance' 37 | - 'type: documentation' 38 | - 'dependencies' 39 | 40 | exclude-labels: 41 | - 'skip-changelog' 42 | -------------------------------------------------------------------------------- /.github/workflows/code-check.yml: -------------------------------------------------------------------------------- 1 | name: Check code health 2 | 3 | on: [pull_request] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | 9 | strategy: 10 | matrix: 11 | node-version: [20.x] 12 | 13 | steps: 14 | - uses: actions/checkout@v4 15 | - name: Use Node.js ${{ matrix.node-version }} 16 | uses: actions/setup-node@v4 17 | with: 18 | node-version: ${{ matrix.node-version }} 19 | - name: Install dependencies 20 | run: yarn install --immutable --immutable-cache --check-cache 21 | - name: Run lint 22 | run: yarn run lint:eslint 23 | - name: Run build 24 | run: yarn run build 25 | - name: Run test 26 | run: yarn run test 27 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish 2 | 3 | on: 4 | push: 5 | tags: 6 | - "v*" 7 | 8 | jobs: 9 | publish: 10 | runs-on: ubuntu-latest 11 | timeout-minutes: 10 12 | steps: 13 | - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 14 | 15 | - name: Install Node.js 16 | uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 17 | with: 18 | node-version: 22.x 19 | cache: yarn 20 | always-auth: true 21 | registry-url: https://registry.npmjs.org 22 | 23 | - run: yarn install 24 | - run: yarn build 25 | 26 | - name: Publish to NPM 27 | run: yarn publish --tag latest --access public 28 | env: 29 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 30 | -------------------------------------------------------------------------------- /.github/workflows/release-drafter.yml: -------------------------------------------------------------------------------- 1 | name: Release Drafter 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | workflow_dispatch: 8 | 9 | jobs: 10 | update_release_draft: 11 | permissions: 12 | contents: write 13 | pull-requests: read 14 | runs-on: ubuntu-latest 15 | timeout-minutes: 10 16 | steps: 17 | - uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # v6.1.0 18 | with: 19 | disable-autolabeler: true 20 | env: 21 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | test/test-app 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, caste, color, religion, or sexual 10 | identity and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the overall 26 | community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or advances of 31 | any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email address, 35 | without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | [dl_oss_dev@linecorp.com](mailto:dl_oss_dev@linecorp.com). 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series of 86 | actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or permanent 93 | ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within the 113 | community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.1, available at 119 | [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. 120 | 121 | Community Impact Guidelines were inspired by 122 | [Mozilla's code of conduct enforcement ladder][Mozilla CoC]. 123 | 124 | For answers to common questions about this code of conduct, see the FAQ at 125 | [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at 126 | [https://www.contributor-covenant.org/translations][translations]. 127 | 128 | [homepage]: https://www.contributor-covenant.org 129 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html 130 | [Mozilla CoC]: https://github.com/mozilla/diversity 131 | [FAQ]: https://www.contributor-covenant.org/faq 132 | [translations]: https://www.contributor-covenant.org/translations 133 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to create-liff-app 2 | 3 | A big welcome and thank you for considering contributing to `create-liff-app`! 4 | 5 | Reading and following these guidelines will help us make the contribution process easy and effective for everyone involved. It also communicates that you agree to respect the time of the developers managing and developing these open source projects. In return, we will reciprocate that respect by addressing your issue, assessing changes, and helping you finalize your pull requests. 6 | 7 | ## Quicklinks 8 | 9 | * [Code of Conduct](#code-of-conduct) 10 | * [Getting Started](#getting-started) 11 | * [Issues](#issues) 12 | * [Pull Requests](#pull-requests) 13 | * [Getting Help](#getting-help) 14 | 15 | ## Code of Conduct 16 | 17 | We take our open source community seriously and hold ourselves and other contributors to high standards of communication. By participating and contributing to this project, you agree to uphold our [Code of Conduct](https://github.com/line/create-liff-app/blob/master/CODE_OF_CONDUCT.md). 18 | 19 | ## Getting Started 20 | 21 | Contributions are made to this repo via Issues and Pull Requests (PRs). A few general guidelines that cover both: 22 | 23 | - Search for existing Issues and PRs before creating your own. 24 | - We work hard to makes sure issues are handled in a timely manner but, depending on the impact, it could take a while to investigate the root cause. 25 | 26 | ### Issues 27 | 28 | Issues should be used to report problems with the project, request a new feature, or to discuss potential changes before a PR is created. When you create a new Issue, a template will be loaded that will guide you through collecting and providing the information we need to investigate. 29 | 30 | If you find an Issue that addresses the problem you're having, please add your own reproduction information to the existing issue rather than creating a new one. Adding a [reaction](https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) can also help be indicating to our maintainers that a particular problem is affecting more than just the reporter. 31 | 32 | ### Pull Requests 33 | 34 | PRs to this project are always welcome and can be a quick way to get your fix or improvement slated for the next release. In general, PRs should: 35 | 36 | - Only fix/add the functionality in question **OR** address wide-spread whitespace/style issues, not both. 37 | - Address a single concern in the least number of changed lines as possible. 38 | - Be accompanied by a complete Pull Request template (loaded automatically when a PR is created). 39 | 40 | In general, we follow these steps: 41 | 42 | 1. Fork the repository to your own Github account 43 | 2. Clone the project to your machine 44 | 3. Create a branch locally with a succinct but descriptive name 45 | 4. Commit changes to the branch 46 | 5. Push changes to your fork 47 | 6. Open a PR in our repository and follow the PR template so that we can efficiently review the changes. 48 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright 2023 LY Corporation 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @line/create-liff-app 2 | [![License](https://img.shields.io/badge/license-Apache-red)](https://www.apache.org/licenses/LICENSE-2.0) 3 | [![Node](https://img.shields.io/badge/node-%E2%89%A7%2014-green?logo=node.js)](https://www.npmjs.com/package/@line/create-liff-app) 4 | 5 | Start developing LIFF application with a simple CLI command. 6 | 7 | - [About](#about) 8 | - [LIFF](#liff) 9 | - [Templates](#templates) 10 | - [Getting Started](#getting-started) 11 | - [Create LIFF Channel](#create-liff-channel) 12 | - [Installation](#installation) 13 | - [Options](#options) 14 | - [License](#license) 15 | 16 | ## About 17 | 18 | ### LIFF 19 | LINE Front-end Framework (LIFF) is a platform for web apps provided by LY Corporation. The web apps running on this platform are called LIFF apps. 20 | 21 | Do you want to know more about LIFF? [Learn more](https://developers.line.biz/en/docs/liff/overview/) 22 | 23 | ### Templates 24 | `create-liff-app` provides JavaScript & TypeScript templates of LIFF application. 25 | 26 | Available frameworks are: `nextjs` `nuxtjs` `react` `vue` `svelte` `vanilla`. 27 | 28 | 29 | ## Getting Started 30 | 31 | ### Create LIFF Channel 32 | Before you run `create-liff-app`, we recommend creating a LIFF Channel first. See the [documentation](https://developers.line.biz/en/docs/liff/getting-started/). 33 | 34 | ### Installation 35 | 36 | Run npm command like: 37 | ```bash 38 | npx @line/create-liff-app 39 | ``` 40 | 41 | To create a new app in a specific folder, you can send a name as an argument. 42 | ```bash 43 | npx @line/create-liff-app my-app 44 | ``` 45 | 46 | ### Options 47 | 48 | `create-liff-app` comes with the following options: 49 | 50 | - **-t, --template <template>** - A template to bootstrap the app with. (available templates: "vanilla", "react", "vue", "svelte", "nextjs", "nuxtjs") 51 | - **-l, --liffid <liff id>** - Liff id. For more information, please visit 52 | - **--js, --javascript** - Initialize as a JavaScript project 53 | - **--ts, --typescript** - Initialize as a TypeScript project 54 | - **--npm, --use-npm** - Bootstrap the app using npm 55 | - **--yarn, --use-yarn** - Bootstrap the app using yarn 56 | - **-v, --version** - output the version number 57 | - **-h, --help** - display help for command 58 | 59 | ## [License](https://github.com/line/create-liff-app/blob/master/LINCENSE.txt) 60 | 61 | This project is licensed under the **Apache license**. 62 | See [LICENSE](https://github.com/line/create-liff-app/blob/master/LINCENSE.txt) for more information. 63 | 64 | Also, using LIFF means you agree to the [LINE Developers Agreement](https://terms2.line.me/LINE_Developers_Agreement). 65 | -------------------------------------------------------------------------------- /create-liff-app.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2023 LY Corporation 2 | 3 | * LY Corporation licenses this file to you under the Apache License, 4 | * version 2.0 (the "License"); you may not use this file except in compliance 5 | * with the License. You may obtain a copy of the License at: 6 | 7 | * https://www.apache.org/licenses/LICENSE-2.0 8 | 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 11 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 12 | * License for the specific language governing permissions and limitations 13 | * under the License. 14 | */ 15 | 16 | import fs from 'fs'; 17 | import path from 'path'; 18 | import { Answers } from 'inquirer'; 19 | import spawn from 'cross-spawn'; 20 | import chalk from 'chalk'; 21 | import validate from 'validate-npm-package-name'; 22 | import inquirer, { ListQuestion, Question } from 'inquirer'; 23 | 24 | const rename: Record = { 25 | '.gitignore.default': '.gitignore' 26 | }; 27 | 28 | export function init(answers: Answers = {}) { 29 | console.log( 30 | `${chalk.greenBright('Welcome')} to the ${chalk.cyan('Create LIFF App')}` 31 | ); 32 | prompt(questions, answers).then(async (answers) => await createLiffApp(answers)); 33 | } 34 | 35 | type PackageManager = 'npm' | 'yarn' 36 | 37 | export async function createLiffApp(answers: Answers) { 38 | const { projectName, template, language, liffId } = answers; 39 | const templateConfig = templates[template] as TemplateOptions | undefined; 40 | if (!templateConfig) { 41 | throw new Error(`Invalid template name: ${template}`); 42 | } 43 | const isTypescript = language === 'TypeScript'; 44 | const cwd = process.cwd(); 45 | const root = path.join(cwd, projectName); 46 | const packageManager = answers.packageManager as PackageManager; 47 | const isYarn = packageManager === 'yarn'; 48 | 49 | try { 50 | if (templateConfig?.getCreateAppScript) { 51 | // generate project using `create-app` 52 | const script = templateConfig.getCreateAppScript({ isTypescript, isYarn, projectName }); 53 | console.log('\nGenerating liff app using `create-app`, this might take a while.\n'); 54 | await executeCreateAppScript(script); 55 | } else { 56 | // create directory 57 | fs.mkdirSync(root, { recursive: true }); 58 | } 59 | 60 | // copy files 61 | const templateName = `${template}${isTypescript ? '-ts' : ''}`; 62 | const templateDir = path.join(__dirname, '../templates', templateName); 63 | const files = fs.readdirSync(templateDir); 64 | for(const file of files.filter(f => f !== 'package.json')) { 65 | const src = path.join(templateDir, file); 66 | const dest = rename[file] ? path.join(root, rename[file]) : path.join(root, file); 67 | copy(src, dest); 68 | } 69 | 70 | if (!templateConfig?.getCreateAppScript) { 71 | // create package.json 72 | const packageName = isValidPackageName(projectName) ? projectName : toValidPackageName(projectName); 73 | const pkg = require(path.join(templateDir, 'package.json')); 74 | pkg.name = packageName; 75 | fs.writeFileSync(path.join(root, 'package.json'), JSON.stringify(pkg, null, 2)); 76 | } 77 | 78 | // create .env file 79 | const content = `${templateConfig.envPrefix}LIFF_ID=${liffId}`; 80 | const envFileName = templateConfig?.envFileNameVariant || '.env'; 81 | fs.writeFileSync(path.join(root, envFileName), content); 82 | 83 | // install 84 | const { dependencies, devDependencies, tsDevDependencies } = templateConfig; 85 | if (isTypescript) devDependencies.push(...tsDevDependencies); 86 | 87 | console.log('\nInstalling dependencies:'); 88 | dependencies.forEach((dependency) => console.log(`- ${chalk.blue(dependency)}`)); 89 | console.log(); 90 | await install({ root, isYarn, dependencies, isDev: false }); 91 | 92 | if (devDependencies.length) { 93 | console.log('\nInstalling devDependencies:'); 94 | devDependencies.forEach((dependency) => console.log(`- ${chalk.blue(dependency)}`)); 95 | console.log(); 96 | await install({ root, isYarn, dependencies: devDependencies, isDev: true }); 97 | } 98 | 99 | // Done 100 | showDoneComments({ projectName, isYarn }); 101 | } catch(error) { 102 | console.error(error); 103 | process.exit(1); 104 | } 105 | } 106 | 107 | function copy(src: string, dest: string) { 108 | const stat = fs.statSync(src); 109 | if (stat.isDirectory()) { 110 | copyDir(src, dest); 111 | } else { 112 | fs.copyFileSync(src, dest); 113 | } 114 | } 115 | 116 | function copyDir(srcDir: string, destDir: string) { 117 | fs.mkdirSync(destDir, { recursive: true }); 118 | for(const file of fs.readdirSync(srcDir)) { 119 | const srcFile = path.resolve(srcDir, file); 120 | const destFile = path.resolve(destDir, file); 121 | copy(srcFile, destFile); 122 | } 123 | } 124 | 125 | function isValidPackageName(name: string): boolean { 126 | const { 127 | validForNewPackages 128 | } = validate(name); 129 | return validForNewPackages; 130 | } 131 | 132 | function toValidPackageName(name: string): string { 133 | return name 134 | .trim() 135 | .toLowerCase() 136 | .replace(/\s+/g, '-') 137 | .replace(/^[._]/, '') 138 | .replace(/[^a-z0-9-~]+/g, '-'); 139 | } 140 | 141 | function executeCreateAppScript(script: string[]) { 142 | return new Promise((resolve, reject) => { 143 | try { 144 | const [command, ...args] = script; 145 | const child = spawn(command, args, { 146 | stdio: 'inherit', 147 | env: { ...process.env, ADBLOCK: '1', DISABLE_OPENCOLLECTIVE: '1' }, 148 | }); 149 | child.on('close', (code) => { 150 | if (code !== 0) { 151 | reject({ command: `${command} ${args.join(' ')}` }); 152 | return; 153 | } 154 | resolve(); 155 | }); 156 | } catch (error) { 157 | reject(`Error occurred during installation: ${error}`); 158 | } 159 | }); 160 | } 161 | 162 | function install({ 163 | root, 164 | dependencies, 165 | isYarn, 166 | isDev, 167 | }: { 168 | root: string; 169 | dependencies: string[]; 170 | isYarn: boolean; 171 | isDev: boolean; 172 | }) { 173 | return new Promise((resolve, reject) => { 174 | try { 175 | const command = isYarn ? 'yarnpkg' : 'npm'; 176 | const args: string[] = []; 177 | if (isYarn) { 178 | args.push('add', '--exact', '--cwd', root); 179 | if (isDev) args.push('--dev'); 180 | } else { 181 | args.push('install', '--save-exact', '--prefix', root); 182 | if (isDev) args.push('--save-dev'); 183 | } 184 | args.push(...dependencies); 185 | 186 | const child = spawn(command, args, { 187 | stdio: 'inherit', 188 | env: { ...process.env, ADBLOCK: '1', DISABLE_OPENCOLLECTIVE: '1' } 189 | }); 190 | child.on('close', code => { 191 | if (code !== 0) { 192 | reject({ command: `${command} ${args.join(' ')}` }); 193 | return; 194 | } 195 | resolve(); 196 | }); 197 | } catch(error) { 198 | reject(`Error occurred during installation: ${error}`); 199 | } 200 | }); 201 | } 202 | 203 | function showDoneComments({ projectName, isYarn }: { projectName: string; isYarn: boolean }) { 204 | console.log('\n\nDone! Now run: \n'); 205 | console.log(` cd ${chalk.blue(projectName)}`); 206 | if (isYarn) { 207 | console.log(' yarn dev\n\n'); 208 | } else { 209 | console.log(' npm run dev\n\n'); 210 | } 211 | } 212 | 213 | const prompt = inquirer.createPromptModule(); 214 | const questions: Array = [ 215 | { 216 | type: 'input', 217 | name: 'projectName', 218 | message: 'Enter your project name: ', 219 | default: 'my-app', 220 | validate: (input: string) => { 221 | const projectName = input.trim(); 222 | if (!projectName) { 223 | console.log(`\n${chalk.yellow('Project name is required.')}`); 224 | return false; 225 | } 226 | if (fs.existsSync(path.basename(projectName)) && fs.readdirSync(projectName).length !== 0) { 227 | console.log(`\n${chalk.yellow('The project is already exists.')}`); 228 | return false; 229 | } 230 | 231 | return true; 232 | }, 233 | }, 234 | { 235 | type: 'list', 236 | name: 'template', 237 | message: 'Which template do you want to use?', 238 | choices: [ 239 | { 240 | value: 'vanilla', 241 | checked: true, 242 | }, 243 | { 244 | value: 'react', 245 | checked: false, 246 | }, 247 | { 248 | value: 'vue', 249 | checked: false, 250 | }, 251 | { 252 | value: 'svelte', 253 | checked: false, 254 | }, 255 | { 256 | value: 'nextjs', 257 | checked: false, 258 | }, 259 | { 260 | value: 'nuxtjs', 261 | checked: false, 262 | }, 263 | ], 264 | }, 265 | { 266 | type: 'list', 267 | name: 'language', 268 | message: 'JavaScript or TypeScript?', 269 | choices: [ 270 | { 271 | value: 'JavaScript', 272 | checked: true 273 | }, 274 | { 275 | value: 'TypeScript', 276 | checked: false 277 | } 278 | ] 279 | }, 280 | { 281 | type: 'input', 282 | name: 'liffId', 283 | message: `Please enter your LIFF ID: \n ${chalk.gray('Don\'t you have LIFF ID? Check out https://developers.line.biz/ja/docs/liff/getting-started/')}`, 284 | default: 'liffId', 285 | validate: (input: string) => { 286 | const liffId = input.trim(); 287 | if (!liffId) { 288 | console.log(); 289 | console.log(`${chalk.yellow('LIFF ID is required.')}`); 290 | return false; 291 | } 292 | return true; 293 | } 294 | }, 295 | { 296 | type: 'list', 297 | name: 'packageManager', 298 | message: 'Which package manager do you want to use?', 299 | choices: [ 300 | { 301 | key: 'yarn', 302 | value: 'yarn', 303 | checked: true, 304 | }, 305 | { 306 | key: 'npm', 307 | value: 'npm', 308 | checked: false, 309 | }, 310 | ], 311 | } 312 | ]; 313 | 314 | type TemplateOptions = { 315 | envPrefix: string; 316 | envFileNameVariant?: string; 317 | dependencies: string[]; 318 | devDependencies: string[]; 319 | tsDevDependencies: string[]; 320 | getCreateAppScript?: (args: CreateAppScriptOptions) => string[]; 321 | }; 322 | type CreateAppScriptOptions = { 323 | isTypescript: boolean; 324 | isYarn: boolean; 325 | projectName: string; 326 | }; 327 | const templates: Record = { 328 | vanilla: { 329 | envPrefix: 'VITE_', 330 | dependencies: ['@line/liff'], 331 | devDependencies: ['vite'], 332 | tsDevDependencies: ['typescript'], 333 | }, 334 | react: { 335 | envPrefix: 'VITE_', 336 | dependencies: ['@line/liff', 'react', 'react-dom'], 337 | devDependencies: ['@vitejs/plugin-react', 'vite'], 338 | tsDevDependencies: ['@types/react', '@types/react-dom', 'typescript'], 339 | }, 340 | vue: { 341 | envPrefix: 'VITE_', 342 | dependencies: ['@line/liff', 'vue'], 343 | devDependencies: ['@vitejs/plugin-vue', 'vite'], 344 | tsDevDependencies: ['typescript', 'vue-tsc'], 345 | }, 346 | svelte: { 347 | envPrefix: 'VITE_', 348 | dependencies: ['@line/liff'], 349 | devDependencies: ['@sveltejs/vite-plugin-svelte', 'svelte', 'vite'], 350 | tsDevDependencies: ['@tsconfig/svelte', 'svelte-check', 'svelte-preprocess', 'tslib', 'typescript'], 351 | }, 352 | nextjs: { 353 | envPrefix: 'NEXT_PUBLIC_', 354 | envFileNameVariant: '.env.local', 355 | dependencies: ['@line/liff'], 356 | devDependencies: [], 357 | tsDevDependencies: [], 358 | getCreateAppScript: ({ isTypescript, isYarn, projectName }) => { 359 | const script = []; 360 | if (isYarn) { 361 | script.push('yarnpkg', 'create', 'next-app'); 362 | } else { 363 | script.push('npx', 'create-next-app', '--use-npm'); 364 | } 365 | script.push(projectName); 366 | if (isTypescript) script.push('--ts'); 367 | 368 | return script; 369 | }, 370 | }, 371 | nuxtjs: { 372 | envPrefix: '', 373 | dependencies: ['@line/liff'], 374 | devDependencies: [], 375 | tsDevDependencies: [], 376 | getCreateAppScript: ({ isTypescript, isYarn, projectName }) => { 377 | const answers = { 378 | name: projectName, 379 | pm: isYarn ? 'yarn' : 'npm', 380 | language: isTypescript ? 'ts' : 'js', 381 | features: ['axios'], 382 | linter: ['eslint'], 383 | ui: 'none', 384 | test: 'none', 385 | mode: 'universal', 386 | target: 'server', 387 | template: 'html', 388 | devTools: 'none', 389 | vcs: 'none', 390 | }; 391 | const script = ['npx', 'create-nuxt-app', projectName, '--answers', JSON.stringify(answers)]; 392 | 393 | return script; 394 | }, 395 | }, 396 | }; 397 | export const templateNames = Object.keys(templates); 398 | -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* Copyright 2023 LY Corporation 3 | 4 | * LY Corporation licenses this file to you under the Apache License, 5 | * version 2.0 (the "License"); you may not use this file except in compliance 6 | * with the License. You may obtain a copy of the License at: 7 | 8 | * https://www.apache.org/licenses/LICENSE-2.0 9 | 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 13 | * License for the specific language governing permissions and limitations 14 | * under the License. 15 | */ 16 | 17 | import { Command, Option } from 'commander'; 18 | import packageJson from './package.json'; 19 | import { init, templateNames } from './create-liff-app'; 20 | import type { Answers } from 'inquirer'; 21 | 22 | const answers = parseFlags(); 23 | init(answers); 24 | 25 | function parseFlags() { 26 | const answers: Answers = {}; 27 | 28 | new Command(packageJson.name) 29 | .version(packageJson.version, '-v, --version') 30 | .usage('[project name] [options]') 31 | .arguments('[projectName]') 32 | .addOption( 33 | new Option('-t, --template