feat(cli): Added CLI tool to improve project setup (#280, #249)

* add CLI package

* feat(cli): init nuxt project

* feat(cli): prepare init and dev commands to start project

* feat(cli): update packages with theme versions

* feat(cli): add config file for usage in templates

* feat(cli): progress info while generating project

* docs: update docs with information how to start with CLI

* chore: do not run typedoc inside cli

* fix: incorrect interfaces imports

CHEATSHEET.md

@@ -8,40 +8,56 @@ This cheatsheet will give you an overview of the Shopware PWA project and how to
 
 As both projects are still undergoing development, we decided to mitigate potential delays through an additional Shopware plugin `SwagVueStorefront` which extends the Sales-Channel API. Eventually, once the core will provide those functionalities, the plugin will be dumped and not required anymore.
 
-There will be a more strealined, interactive development setup, but for now we're focussing on progress and stability of the platform.
+There will be a more streamlined, interactive development setup, but for now we're focussing on progress and stability of the platform.
 
 ## Installation
 
 ### Prerequisites
 
- * `shopware/platform` running within either `showpare/development` or `shopware/production`
- * `node@^10` installed
- * `yarn` package manager installed
+- `shopware/platform` running within either `showpare/development` or `shopware/production`
+- `node@^10` installed
+- `yarn` package manager installed
 
-
 ### Installation steps
 
-**Shopware setup**
+#### Shopware setup
 
 Note: You can skip this section if you just want to try the PWA. It will be preconfigured to use a public instance.
 
- 1. Make sure you have a running Shopware 6 instance (preferrably stable 6.0 once available)
- 2. Clone [SwagVueStorefront](https://github.com/elkmod/SwagVueStorefront) into your `custom/plugins` directory.
- 3. Install the plugin by running `bin/console plugin:install --activate SwagVueStorefront`
- 4. Refresh the indices using `bin/console dal:index:refresh`
- 5. Go to the admin panel and copy the API access key from your sales channel settings
-
-**PWA setup**
-
- 1. Clone the [showpare-pwa](https://github.com/DivanteLtd/shopware-pwa) project into a directory of your choice.
- 2. Run `yarn` in the root.
- 3. Go to `packages` and run `yarn build --types`
- 4. Go to `packages/default-theme` and run `yarn install`
- 5. **Only if you are using a custom Shopware instance** 
-
- Edit `packages/default-theme/plugins/api-client.js` and add your endpoint and accessToken to the `setup` parameters
-
- 6. Run `yarn dev` in the same directory to start the local node server.
- 7. Your application will be available on [http://localhost:3000](http://localhost:3000)
+1. Make sure you have a running Shopware 6 instance (preferably stable 6.0 once available)
+2. Clone [SwagVueStorefront](https://github.com/elkmod/SwagVueStorefront) into your `custom/plugins` directory.
+3. Install the plugin by running `bin/console plugin:install --activate SwagVueStorefront`
+4. Refresh the indices using `bin/console dal:index:refresh`
+5. Go to the admin panel and copy the API access key from your sales channel settings
+
+#### PWA setup
+
+1. Clone the [showpare-pwa](https://github.com/DivanteLtd/shopware-pwa) project into a directory of your choice.
+2. Run `yarn` in the root and then `yarn build --types`.
+3. Go anywhere outside the project
+4. Create your own project directory `mkdir my-project` and go inside `cd my-project`
+5. run `shopware-pwa init`
+6. run `yarn dev`
+7. Your application will be available on [http://localhost:3000](http://localhost:3000)
+
+Now you have complete ShopwarePWA project running locally
+
+##### Running Shopware PWA on custom Shopware instance
+
+1. add new file `shopware-pwa.config.js` inside root of newly created project
+2. fill it with your needs
+
+```
+module.exports = {
+ shopwareEndpoint: "https://shopware-2.vuestorefront.io/sales-channel-api/v1",
+ shopwareAccessToken: "SWSCMUDKAKHSRXPJEHNOSNHYAG"
+};
+```
+
+3. run again `shopware-pwa init` and then `yarn dev`
+
+##### Developing Shopware PWA
+
+If you'd like to develop Shopware PWA, then run inside your created project `shopware-pwa dev` instead of `yarn dev`. It will watch files and components in `shopware-pwa/packages/default-theme` and instantly copy changes to your project.
 
 ### Common errors

README.md

@@ -11,6 +11,9 @@
 
 See [the documentation](https://shopware-pwa-docs.netlify.com/#introduction-to-shopware-pwa) to get started.
 
+### Quick start
+Read instruction in `CHEATSHEET.md` file
+
 ### Development
 
 Just type `yarn` to install node dependencies and run the post-install script that links unpublished packages. Now, you're ready to develop. You can watch the compilation process by running `yarn dev` or `yarn dev:<package-name> `to specify the package that you will be working on. 

jest.config.js

@@ -26,6 +26,7 @@ module.exports = {
  collectCoverageFrom: [
  "packages/*/src/**/*.ts",
  "!packages/default-template/**",
+ "!packages/cli/**",
  "!**/interfaces/**"
  ],
  watchPathIgnorePatterns: ["/node_modules/"],

package.json

@@ -17,7 +17,7 @@
  "dev:helpers": "yarn dev helpers -format=esm-bundler",
  "dev:debug": "node --inspect scripts/dev.js",
  "build": "node scripts/build.js --types",
- "postinstall": "lerna link",
+ "postinstall": "node scripts/linkDependencies.js && lerna link",
  "lint": "prettier --write --parser typescript 'packages/**/*.ts'",
  "test": "jest",
  "test:e2e": "jest --e2e=true --runInBand",

packages/cli/.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+npm-debug.log
+coverage
+.nyc_output
+dist
+build
+.vscode

packages/cli/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/cli/__tests__/cli-integration.test.ts

@@ -0,0 +1,29 @@
+const { system, filesystem } = require("gluegun");
+
+const src = filesystem.path(__dirname, "..");
+
+const cli = async cmd =>
+ system.run("node " + filesystem.path(src, "bin", "cli") + ` ${cmd}`);
+
+test("outputs version", async () => {
+ const output = await cli("--version");
+ expect(output).toContain("0.0.1");
+});
+
+test("outputs help", async () => {
+ const output = await cli("--help");
+ expect(output).toContain("0.0.1");
+});
+
+test("generates file", async () => {
+ const output = await cli("generate foo");
+
+ expect(output).toContain("Generated file at models/foo-model.ts");
+ const foomodel = filesystem.read("models/foo-model.ts");
+
+ expect(foomodel).toContain(`module.exports = {`);
+ expect(foomodel).toContain(`name: 'foo'`);
+
+ // cleanup artifact
+ filesystem.remove("models");
+});

packages/cli/bin/shopware-pwa

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+
+
+/* tslint:disable */
+// check if we're running in dev mode
+var devMode = require('fs').existsSync(`${__dirname}/../src`)
+// or want to "force" running the compiled version with --compiled-build
+var wantsCompiled = process.argv.indexOf('--compiled-build') >= 0
+
+if (wantsCompiled || !devMode) {
+ // this runs from the compiled javascript source
+ require(`${__dirname}/../build/cli`).run(process.argv)
+} else {
+ // this runs from the typescript source (for dev only)
+ // hook into ts-node so we can run typescript on the fly
+ require('ts-node').register({ project: `${__dirname}/../tsconfig.json` })
+ // run the CLI with the current process arguments
+ require(`${__dirname}/../src/cli`).run(process.argv)
+}
+
+

packages/cli/package.json

@@ -0,0 +1,52 @@
+{
+ "name": "@shopware-pwa/cli",
+ "version": "0.0.1",
+ "description": "Shopware PWA CLI",
+ "private": true,
+ "types": "build/types/types.d.ts",
+ "bin": {
+ "shopware-pwa": "bin/shopware-pwa"
+ },
+ "scripts": {
+ "format": "prettier --write **/*.{js,ts,tsx,json}",
+ "lint": "tslint -p .",
+ "clean-build": "rm -rf ./build",
+ "compile": "tsc -p .",
+ "copy-templates": "if [ -e ./src/templates ]; then cp -a ./src/templates ./build/; fi",
+ "build": "yarn format && yarn lint && yarn clean-build && yarn compile && yarn copy-templates",
+ "prepublishOnly": "yarn build",
+ "test": "jest",
+ "watch": "jest --watch",
+ "snapupdate": "jest --updateSnapshot",
+ "coverage": "jest --coverage"
+ },
+ "files": [
+ "tsconfig.json",
+ "tslint.json",
+ "build",
+ "LICENSE",
+ "readme.md",
+ "docs",
+ "bin"
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "gluegun": "^4.1.2"
+ },
+ "devDependencies": {
+ "@types/node": "^12.7.11",
+ "@types/jest": "^24.0.18",
+ "ts-node": "^8.4.1",
+ "ts-jest": "^24.1.0",
+ "tslint": "^5.12.0",
+ "tslint-config-prettier": "^1.17.0",
+ "tslint-config-standard": "^8.0.1",
+ "typescript": "^3.6.3",
+ "prettier": "^1.12.1",
+ "jest": "^24.1.0"
+ },
+ "jest": {
+ "preset": "ts-jest",
+ "testEnvironment": "node"
+ }
+}

packages/cli/readme.md

@@ -0,0 +1,25 @@
+# Shopware PWA CLI
+
+A CLI for Shopware PWA.
+
+## Customizing your CLI
+
+Check out the documentation at https://github.com/infinitered/gluegun/tree/master/docs.
+
+## Publishing to NPM
+
+To package your CLI up for NPM, do this:
+
+```shell
+$ npm login
+$ npm whoami
+$ npm lint
+$ npm test
+(if typescript, run `npm run build` here)
+$ npm publish
+```
+
+# License
+
+MIT - see LICENSE
+

packages/cli/src/cli.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+ shopwareEndpoint: "https://shopware-2.vuestorefront.io/sales-channel-api/v1",
+ shopwareAccessToken: "SWSCMUDKAKHSRXPJEHNOSNHYAG"
+};

packages/cli/src/cli.ts

@@ -0,0 +1,25 @@
+const { build } = require("gluegun");
+
+/**
+ * Create the cli and kick it off
+ */
+async function run(argv) {
+ // create a CLI runtime
+ const cli = build()
+ .brand("shopware-pwa")
+ .src(__dirname)
+ .plugins("./node_modules", { matching: "shopware-pwa-*", hidden: true })
+ .help() // provides default for help, h, --help, -h
+ .version() // provides default for version, v, --version, -v
+ .create();
+ // enable the following method if you'd like to skip loading one of these core extensions
+ // this can improve performance if they're not necessary for your project:
+ // .exclude(['meta', 'strings', 'print', 'filesystem', 'semver', 'system', 'prompt', 'http', 'template', 'patching'])
+ // and run it
+ const toolbox = await cli.run(argv);
+
+ // send it back (for testing, mostly)
+ return toolbox;
+}
+
+module.exports = { run };

packages/cli/src/commands/cli.ts

@@ -0,0 +1,13 @@
+import { GluegunCommand } from "gluegun";
+
+const command: GluegunCommand = {
+ name: "cli",
+ run: async toolbox => {
+ const { print } = toolbox;
+
+ print.info("Welcome to Shopware PWA CLI");
+ print.info("Explore your options typing: shopware-pwa --help");
+ }
+};
+
+module.exports = command;

packages/cli/src/commands/dev.ts

@@ -0,0 +1,23 @@
+import { GluegunCommand } from "gluegun";
+
+const command: GluegunCommand = {
+ name: "dev",
+ run: async toolbox => {
+ const {
+ system: { spawn },
+ print: { info }
+ } = toolbox;
+
+ info(`Starting Shopware PWA development project...`);
+
+ toolbox.themeFolders.forEach(themeFolder =>
+ toolbox.watchThemeFolder(themeFolder)
+ );
+
+ spawn("yarn dev", {
+ stdio: "inherit"
+ });
+ }
+};
+
+module.exports = command;

packages/cli/src/commands/generate.ts

@@ -0,0 +1,23 @@
+import { GluegunToolbox } from "gluegun";
+
+module.exports = {
+ name: "generate",
+ alias: ["g"],
+ run: async (toolbox: GluegunToolbox) => {
+ const {
+ parameters,
+ template: { generate },
+ print: { info }
+ } = toolbox;
+
+ const name = parameters.first;
+
+ await generate({
+ template: "model.ts.ejs",
+ target: `models/${name}-model.ts`,
+ props: { name }
+ });
+
+ info(`Generated file at models/${name}-model.ts`);
+ }
+};