Merge pull request #186 from DivanteLtd/workflow/theme/deploy-with-st…

…orefront-ui-develop

workflow: use SFUI for development, deploy master to production

.github/workflows/deploy-zeit.yml

@@ -15,13 +15,26 @@ jobs:
  uses: actions/setup-node@v1
  with:
  node-version: "10.x"
+ - name: Clone SFUI # temp step for development
+ run: |
+ yarn
+ node ./scripts/prepareSFUIRepoClone.js
  - name: Build packages
  run: |
  yarn
  yarn build
- - name: Deploy to zeit
+ - name: Deploy PR to zeit
+ if: github.event_name == 'pull_request'
+ uses: patzick/now-deployment@master
+ with:
+ github-token: ${{ secrets.GITHUB_TOKEN }}
+ zeit-token: ${{ secrets.ZEIT_TOKEN }}
+ zeit-team-id: team_zpOFzrZjyURkFwGZsKEEHzcv
+ - name: Deploy Production to zeit
+ if: github.event_name != 'pull_request'
  uses: patzick/now-deployment@master
  with:
  github-token: ${{ secrets.GITHUB_TOKEN }}
  zeit-token: ${{ secrets.ZEIT_TOKEN }}
  zeit-team-id: team_zpOFzrZjyURkFwGZsKEEHzcv
+ now-args: '--prod'

.gitignore

@@ -9,3 +9,9 @@ local
 explorations
 TODOs.md
 docs/
+
+# Files generated by local published packages
+.yalc
+yalc.lock
+vsf-core-packages/vue
+vsf-core-packages/shared

packages/default-theme/.gitignore

@@ -89,4 +89,4 @@ sw.*
 .DS_Store
 
 # Vim swap files
-*.swp
+*.swp

packages/default-theme/nuxt.config.js

@@ -1,3 +1,5 @@
+import path from 'path'
+
 const coreDevelopment = true
 
 export default {
@@ -83,6 +85,12 @@ export default {
  ** You can extend webpack config here
  */
  extend(config, { isDev, isClient }) {
+ config.resolve.alias['@storefront-ui/vue'] = path.resolve(
+ 'node_modules/@storefront-ui/vue'
+ )
+ config.resolve.alias['@storefront-ui/shared'] = path.resolve(
+ 'node_modules/@storefront-ui/shared'
+ )
  if (isClient && !isDev) {
  config.optimization.splitChunks.cacheGroups.commons.minChunks = 2
  }

packages/default-theme/package.json

@@ -27,9 +27,9 @@
  "@shopware-pwa/helpers": "^0.1.0",
  "@shopware-pwa/shopware-6-client": "^0.1.0",
  "@storefront-ui/vue": "^0.3.4",
+ "cookie-universal-nuxt": "^2.0.19",
  "nuxt": "^2.10.2",
- "slugify": "^1.3.6",
- "cookie-universal-nuxt": "^2.0.19"
+ "slugify": "^1.3.6"
  },
  "devDependencies": {
  "@babel/runtime-corejs3": "^7.7.4",

scripts/prepareCoreRepoClone.js

@@ -8,7 +8,7 @@ const fs = require("fs-extra");
 
 const tempDir = path.resolve(__dirname, "../temp");
 const repoDir = `${tempDir}/next`;
-const nuxtModuleDir = `${repoDir}/packages/nuxt-module`;
+const nuxtModuleDir = `${repoDir}/packages/core/nuxt-module`;
 const corePackagesDir = path.resolve(__dirname, "../vsf-core-packages");
 const nuxtModuleDestinationDir = `${corePackagesDir}/nuxt-module`;
 
@@ -22,7 +22,7 @@ async function run() {
  await execa("git", ["clone", "https://github.com/DivanteLtd/next", repoDir], {
  stdio: "inherit"
  });
- if (!fs.existsSync(nuxtModuleDestinationDir)) {
+ if (!fs.existsSync(corePackagesDir)) {
  fs.mkdirSync(corePackagesDir);
  }
 

scripts/prepareSFUIRepoClone.js

@@ -0,0 +1,85 @@
+/**
+ * Setup SFUI develop branch and locally publish dependencies
+ */
+
+const execa = require("execa");
+const path = require("path");
+const fs = require("fs-extra");
+
+const tempDir = path.resolve(__dirname, "../temp");
+const repoDir = `${tempDir}/storefront-ui`;
+const vuePackageDir = `${repoDir}/packages/vue`;
+const sharedPackageDir = `${repoDir}/packages/shared`;
+const themeDir = path.resolve(__dirname, "../packages/default-theme");
+const createIndexScriptPath = `${vuePackageDir}/scripts/create-index-files.js`;
+const setScssScriptPath = `${vuePackageDir}/scripts/set-styles-variables-root-path.js`;
+async function run() {
+ /**
+ * Clone develop SFUI
+ */
+ if (fs.existsSync(repoDir)) {
+ fs.removeSync(repoDir);
+ }
+ await execa(
+ "git",
+ [
+ "clone",
+ "--single-branch",
+ "--branch",
+ "develop",
+ "https://github.com/DivanteLtd/storefront-ui",
+ repoDir
+ ],
+ {
+ stdio: "inherit"
+ }
+ );
+
+ /**
+ * Init repo
+ */
+ await execa("yarn", [], {
+ stdio: "inherit",
+ cwd: repoDir
+ });
+
+ // When script added
+ // await execa("yarn", ["prepublish"], {
+ // stdio: "inherit",
+ // cwd: vuePackageDir
+ // });
+ // else
+ const { createIndexFiles } = require(createIndexScriptPath);
+ const { setStylesVariablesRootPath } = require(setScssScriptPath);
+ function runPrePublish() {
+ createIndexFiles();
+ setStylesVariablesRootPath();
+ }
+ runPrePublish();
+
+ // Publish shared pashage
+ await execa("npx", ["yalc", "publish"], {
+ stdio: "inherit",
+ cwd: sharedPackageDir
+ });
+
+ // Publish vue package
+ await execa("npx", ["yalc", "publish"], {
+ stdio: "inherit",
+ cwd: vuePackageDir
+ });
+
+ /**
+ * Add vue and shared package into theme
+ */
+ await execa("npx", ["yalc", "add", "@storefront-ui/vue"], {
+ stdio: "inherit",
+ cwd: themeDir
+ });
+ await execa("npx", ["yalc", "add", "@storefront-ui/shared"], {
+ stdio: "inherit",
+ cwd: themeDir
+ });
+}
+
+run();

vsf-core-packages/nuxt-module/lib/module.js

@@ -43,7 +43,7 @@ module.exports = function VueStorefrontNuxtModule (moduleOptions) {
  //----------------------s--------------
 
  // Using symlinks in lerna somehow breaks composition API behavior as a singleton.
- if (options.coreDevelopment === true || options.coreDevelopment.enabled === true) {
+ if (options.coreDevelopment === true) {
  log.info(`Vue Storefront core development mode is on. ${chalk.italic('[coreDevelopment]')}`)
  this.extendBuild(config => {
  config.resolve.alias['@vue/composition-api'] = path.resolve('node_modules/@vue/composition-api')