@softlimit/theme-envy 0.1.10-alpha → 0.1.12-alpha

package/README.md

@@ -107,6 +107,7 @@ Commands:
   build [options] [env]        Build Shopify theme
   clean                        Empty output directory
   convert [options] [source]   Convert an existing Shopify theme to Theme Envy directory structure
+  deploy                       Deploy your theme to Shopify by copying the live theme then pushing changes to codebase on top of it
   dev                          Start development process and sync with Shopify using the Shopify CLI
   find-orphans                 Find unused snippets, partials, and assets in your Shopify theme
   init [options] [source]      Initialize a new Shopify theme project with Theme Envy directory structure

package/build/functions/liquid/functions/flatten-shopify-directory-structure.js

@@ -13,6 +13,9 @@ module.exports = function(path) {
   if (path.includes('sections/')) {
     return `sections/${filename}`
   }
+  if (path.includes('blocks/')) {
+    return `blocks/${filename}`
+  }
   if (path.includes('layout/')) {
     return `layout/${filename}`
   }

package/build/functions/liquid/functions/section-schema-inject.js

@@ -9,7 +9,7 @@ const path = require('path')
 const { parseSchema } = require('#Helpers')
 
 module.exports = function({ source, filePath }) {
-  if (!filePath.includes('sections')) return source
+  if (!filePath.includes('sections') && !filePath.includes('blocks')) return source
   // inject installs into inlined schema with {% schema %} {% endschema %} tags
   const hasSchemaTag = source.match(/{% schema %}/g)
   if (hasSchemaTag) return injectInstallsSchema({ source, filePath })
@@ -21,6 +21,9 @@ module.exports = function({ source, filePath }) {
 }
 
 function injectJsSchema({ source, filePath, schema }) {
+  if (filePath.includes('blocks')) {
+    console.log('inject block schema', filePath, schema)
+  }
   // regexp for a quoted string within our schema match
   const schemaFile = schema[0].match(/'(.*)'/)[1] || schema[0].match(/"(.*)"/)[1]
   // load the file export

package/build/functions/liquid/index.js

@@ -18,8 +18,8 @@ module.exports = function({ file, mode, verbose }) {
   const outputPath = `${ThemeEnvy.outputPath}/${shopifyPath}`
   let source = fs.readFileSync(file, 'utf8')
 
-  // inject schema .js into liquid section files
-  if (file.includes('sections/')) source = sectionSchemaInject({ source, filePath: file })
+  // inject schema .js into liquid section or block files
+  if (file.includes('sections/') || file.includes('blocks/')) source = sectionSchemaInject({ source, filePath: file })
 
   // apply our custom liquid tags: partial, hook, theme
   source = extendLiquid({ source, filePath: file })

package/helpers/functions/deploy/README.md

@@ -0,0 +1,19 @@
+# CI/CD with Github Workflow
+
+During the `init` command, Theme Envy copies a `deploy.yml` workflow file into your project. This file is used to build and deploy your project to Github Pages.
+
+## Variable and Secret Requirements
+
+This workflow requires one environment secret to be set in your Github repository settings.
+
+First, set up a 'production' environment for this workflow to run in.
+
+Next, install Theme Access in your store and create a new theme access token.
+
+Save this access token as an environment secret called `SHOPIFY_CLI_THEME_TOKEN`.
+
+## Triggering the workflow
+
+The deploy workflow is triggered by any added tag that starts with `v`. This is usually done when you create a new release.
+
+For testing purposes, it will also run on any push to a branch named `deploy-release-action`.

package/helpers/functions/deploy/build-promise.js

@@ -0,0 +1,14 @@
+const path = require('path')
+const themeBuild = require(path.resolve(__dirname, '../../../build/index.js'))
+const themeClean = require('../dist-clean.js')
+
+module.exports = function(newThemeID) {
+  themeClean()
+  const promise = new Promise((resolve, reject) => {
+    themeBuild()
+    ThemeEnvy.events.on('build:complete', () => {
+      resolve(newThemeID)
+    })
+  })
+  return promise
+}

package/helpers/functions/deploy/duplicate-live-theme.js

@@ -0,0 +1,96 @@
+/*
+  Exports function: duplicateLiveTheme
+  Returns a promise that resolves to the new theme ID
+*/
+const { spawn } = require('child_process')
+const path = require('path')
+const env = require('./env.js')
+process.env.SHOPIFY_CLI_THEME_TOKEN = env.password
+process.env.SHOPIFY_FLAG_STORE = ThemeEnvy.store
+const dist = path.resolve(process.cwd(), ThemeEnvy.outputPath)
+
+module.exports = async ({ themeName, type = 'unpublished' }) => {
+  /*
+  Download live theme from shopify to dist folder
+  */
+  const _downloadLiveTheme = async () => {
+    console.log('Downloading Live Theme')
+    return new Promise((resolve, reject) => {
+      try {
+        const pull = spawn('shopify', ['theme', 'pull', '--live', '--path=' + dist], {
+          stdio: 'inherit'
+        })
+        pull.on('close', resolve)
+
+        const handleError = (error) => {
+          console.log(error)
+          reject(error)
+        }
+
+        pull.on('error', handleError)
+      } catch (error) {
+        const err = new Error('Could not download live theme')
+        reject(err)
+        throw err
+      }
+    })
+  }
+
+  // push without context templates first
+  const _shopifyNewTheme = async () => {
+    console.log(`Creating Theme: ${themeName}`)
+    return new Promise((resolve, reject) => {
+      try {
+        const push = spawn('shopify', ['theme', 'push', '--ignore=templates/\*.context.\*.json', '--ignore=sections/\*.context.\*.json', `--${type}`, '--json', (type === 'unpublished' && ('--theme=' + themeName)), '--path=' + dist])
+        push.stdout.setEncoding('utf8')
+        push.stdout.on('data', data => {
+          console.log(data)
+          if (data.includes('{"theme":')) {
+            // extract theme id from data
+            const themeID = data.match(/"id":(\d+)/)[1]
+            resolve(themeID)
+          }
+        })
+        const handleError = (error) => {
+          reject(error)
+        }
+        push.stderr.on('data', handleError)
+        push.on('error', handleError)
+      } catch {
+        throw new Error('Could not create new theme')
+      }
+    })
+  }
+
+  // then do another push to the same theme and only push context templates
+  const _pushAdditionalTemplates = async (themeId) => {
+    console.log(`Updating additional templates on theme: ${themeId}`)
+    return new Promise((resolve, reject) => {
+      try {
+        const push = spawn('shopify', ['theme', 'push', '--only=templates/\*.context.\*.json', '--only=sections/\*.context.\*.json', '--json', '--theme=' + themeId, '--path=' + dist])
+        push.stdout.setEncoding('utf8')
+        push.stdout.on('data', data => {
+          console.log(data)
+          if (data.includes('{"theme":')) {
+            // extract theme id from data
+            const themeID = data.match(/"id":(\d+)/)[1]
+            resolve(themeID)
+          }
+        })
+      } catch {
+        throw new Error('Could not push to new theme')
+      }
+    })
+  }
+
+  /*
+  do everything
+  */
+  return _downloadLiveTheme()
+    .then(_shopifyNewTheme)
+    .then(themeId => _pushAdditionalTemplates(themeId))
+    .catch((err) => {
+      console.error(err.toString())
+      throw new Error('Theme download/backup failed')
+    })
+}

package/helpers/functions/deploy/env.js

@@ -0,0 +1,5 @@
+/* eslint-disable no-undef */
+require('dotenv').config()
+module.exports = {
+  password: process.env.SHOPIFY_CLI_THEME_TOKEN,
+}

package/helpers/functions/deploy/index.js

@@ -0,0 +1,46 @@
+/**
+  * @description theme-envy deploy duplicates the live theme, then pushes a build of the current theme to that new theme
+  * @example npx theme-envy deploy
+  * @returns {Void}
+  */
+
+const path = require('path')
+const fs = require('fs')
+const packageSettings = require(path.resolve(process.cwd(), 'package.json'))
+const duplicateLiveTheme = require('./duplicate-live-theme')
+const buildPromise = require('./build-promise')
+const pushTheme = require('./push-theme')
+const themeClean = require('../dist-clean')
+const themeName = `${packageSettings.version} ${packageSettings.description}`
+
+module.exports = function() {
+  // clean the dist directory
+  themeClean()
+
+  // duplicate live theme into output path
+  duplicateLiveTheme({ themeName })
+
+    // build theme from src
+    .then(buildPromise)
+
+    // push theme to new theme id
+    .then(pushTheme)
+
+    // get the theme id from the pushed theme and run post deploy scripts
+    .then(themeID => {
+      const postDeployPath = path.resolve(process.cwd(), 'utils/post-deploy.js')
+      if (fs.existsSync(postDeployPath)) {
+        const postDeploy = require(postDeployPath)
+        postDeploy({ themeName, themeID })
+      }
+
+      // all done, log that the deploy is complete
+      console.log('DEPLOY COMPLETE')
+    })
+  // catch any errors and log them
+    .catch(error => {
+      console.log('Could not deploy theme')
+      console.log(error)
+      process.exit()
+    })
+}

package/helpers/functions/deploy/push-theme.js

@@ -0,0 +1,32 @@
+const { spawn } = require('child_process')
+const path = require('path')
+const dist = path.resolve(process.cwd(), ThemeEnvy.outputPath)
+
+module.exports = async (newThemeID) => {
+  return new Promise((resolve, reject) => {
+    try {
+      // shopify push
+      const push = spawn('shopify', ['theme', 'push', '--theme=' + newThemeID, '--ignore=*.json', '--path=' + dist])
+      push.stdout.setEncoding('utf8')
+      push.stdout.on('data', data => {
+        console.log(data)
+      })
+      push.on('close', () => {
+        resolve(newThemeID)
+      })
+      const handleError = (error) => {
+        reject(error)
+        console.error(error.message)
+        throw new Error('Could not push theme')
+      }
+      push.stderr.on('data', handleError)
+      push.on('error', handleError)
+      return newThemeID
+    } catch (error) {
+      console.log(error)
+      reject(error)
+      // exit the process
+      process.exit()
+    }
+  })
+}

package/helpers/functions/ensure-directories.js

@@ -10,7 +10,7 @@
 const fs = require('fs-extra')
 const path = require('path')
 
-const directories = ['assets', 'config', 'layout', 'locales', 'sections', 'snippets', 'templates']
+const directories = ['assets', 'blocks', 'config', 'layout', 'locales', 'sections', 'snippets', 'templates']
 const envyDirectories = ['theme-envy/elements', 'theme-envy/features', 'theme-envy/partials', 'theme-envy/schema']
 function ensureDirectory(root, dir) {
   fs.ensureDirSync(path.resolve(root, dir))

package/index.js

@@ -19,6 +19,7 @@ const themeEnvyCommands = {
   build: require('#Build'),
   clean: require('#Helpers/functions/dist-clean.js'),
   convert: require('#Convert'),
+  deploy: require('#Helpers/functions/deploy/index.js'),
   dev: require('#Helpers/functions/dev.js'),
   init: require('#Init'),
   ignore: require('#Ignore'),
@@ -88,6 +89,14 @@ This does the following things:
     themeEnvyCommands.init(source, options)
   })
 
+program
+  .command('deploy')
+  .description('Deploy your theme to Shopify by copying the live theme then pushing changes to codebase on top of it')
+  .action((options, command) => {
+    scriptMessage(command.name())
+    themeEnvyCommands.deploy()
+  })
+
 program
   .command('dev')
   .description('Start development process and sync with Shopify using the Shopify CLI')

package/init/functions/copy-starter-config-files/.github/workflows/deploy.yml

@@ -0,0 +1,53 @@
+name: Deploy Production Theme
+
+on:
+  push:
+    # trigger on v* tags
+    tags:
+      - 'v*'
+    # allow tests from pushes to branch
+    branches:
+      - 'deploy-release-action'
+
+  # or manually
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment: production
+
+    # connects organization and repo variables and secrets to the runner
+    env:
+      SHOPIFY_FLAG_STORE: ${{ vars.SHOPIFY_FLAG_STORE }}
+      SHOPIFY_CLI_THEME_TOKEN: ${{ secrets.SHOPIFY_CLI_THEME_TOKEN }}
+      SHOPIFY_CLI_TTY: 0
+    steps:
+      # load the current repo on the runner
+      - name: checkout repo
+        uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.WORKFLOW_REPO_ACCESS }}
+
+      # set up node
+      - name: use node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.13.0'
+
+      # set up ruby
+      - name: use ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.0'
+
+      # install dependencies
+      - name: install dependencies
+        run: |
+          gem install bundler
+          npm install -g npm@8.19.2
+          npm install
+
+      # run deployment script from framework bin scripts
+      - name: deploy new theme
+        run: npx theme-envy deploy

package/init/functions/copy-starter-config-files/index.js

@@ -25,4 +25,11 @@ module.exports = function({ target, opts }) {
     if (err) return console.error(err)
     console.log(`${logSymbols.success} Utils starter files copied`)
   })
+
+  // copy github deploy workflow
+  const githubDeploySrc = path.resolve(__dirname, './.github/workflows/deploy.yml')
+  fs.copy(githubDeploySrc, path.resolve(target, '.github/workflows/deploy.yml'), err => {
+    if (err) return console.error(err)
+    console.log(`${logSymbols.success} GitHub deploy workflow copied`)
+  })
 }

package/init/functions/copy-starter-config-files/utils/post-deploy.js

@@ -0,0 +1,9 @@
+/**
+  * @description runs directly after a deployment to Shopify to run any additional processes or notifications a user may want to run
+  * @param {string} themeId - The theme ID that was just deployed
+  * @returns {Void}
+  */
+
+module.exports = ({ themeName, themeID }) => {
+  // placeholder
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softlimit/theme-envy",
-  "version": "0.1.10-alpha",
+  "version": "0.1.12-alpha",
   "description": "Softlimit Shopify Theme Development Environment",
   "bin": {
     "theme-envy": "./index.js"
@@ -36,7 +36,7 @@
     "url": "https://github.com/softlimit/theme-envy"
   },
   "engines": {
-    "npm": "8.x"
+    "npm": ">=8.x"
   },
   "standard-version": {
     "scripts": {
@@ -84,6 +84,7 @@
   },
   "devDependencies": {
     "caller": "^1.1.0",
+    "dotenv": "^16.4.5",
     "jsdoc": "^4.0.2"
   }
 }