Merge pull request #1 from barrel/scott/develop

Refactor plugins and update seed-theme

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.editorconfig

@@ -0,0 +1,9 @@
+# http://editorconfig.org/
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+end_of_line = lf
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: ['standard-with-typescript'],
+  parserOptions: {
+    project: './tsconfig.json'
+  }
+}

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "editorconfig.editorconfig",
+    "mgmcdermott.vscode-language-babel",
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint",
+    "shopify.theme-check-vscode",
+    "bradlc.vscode-tailwindcss",
+    "alanzhang.open-symlink-source"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "editor.formatOnSave": true,
+  "eslint.format.enable": true,
+  "[css]": {
+    "editor.defaultFormatter": "stylelint.vscode-stylelint"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "vscode.json-language-features",
+    "editor.formatOnSave": false
+  }
+}

README.md

@@ -1 +1,10 @@
-# Barrel Shopify
+# @barrelny/shopify
+
+Shopify theme development resources created by Barrel, a full-service DTC ecommerce agency based in New York City.
+
+## Packages
+
+- [vite-plugin-shopify](./packages/vite-plugin-shopify)
+- [vite-plugin-shopify-modules](./packages/vite-plugin-shopify-modules)
+- [vite-shopify-example](./themes/vite-shopify-example)
+- [seed-theme](./themes/seed-theme)

package.json

@@ -1,18 +1,41 @@
 {
   "name": "@barrelny/shopify",
   "version": "0.0.0",
-  "private": true,
-  "workspaces": ["packages/*"],
+  "workspaces": [
+    "packages/*",
+    "themes/*"
+  ],
   "scripts": {
-    "build": "turbo run build",
-    "dev": "turbo run dev --parallel",
-    "lint": "turbo run lint"
+    "build": "turbo run build --filter=vite-plugin-*",
+    "dev": "turbo run dev --filter=vite-plugin-* --parallel",
+    "seed:dev": "cd themes/seed-theme && npm run dev",
+    "lint": "turbo run lint",
+    "change:add": "changeset add",
+    "change:version": "changeset version",
+    "change:publish": "changeset publish"
   },
   "engines": {
     "node": ">=16.0.0"
   },
   "dependencies": {
     "turbo": "latest"
   },
+  "devDependencies": {
+    "@changesets/cli": "^2.23.0",
+    "@types/debug": "^4.1.7",
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.0.1",
+    "@typescript-eslint/parser": "^4.0.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.12.1",
+    "eslint-config-standard-with-typescript": "^21.0.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "rollup": "^2.75.6",
+    "tsup": "^6.1.2",
+    "typescript": "^4.7.3"
+  },
   "packageManager": "pnpm@7.1.0"
 }

packages/create-shopify-theme/README.md

@@ -1,3 +1,3 @@
 # Create Shopify Theme
 
-CLI tool for creating a new Shopify theme based on SEED, Barrel's starting point for theme development using Tailwind CSS and vite-shopify.
+CLI tool for creating a new Shopify theme based on SEED, Barrel's starting point for theme development using Tailwind CSS and vite-shopify.

packages/create-shopify-theme/package.json

@@ -1,3 +1,3 @@
 {
   "name": "create-shopify-theme"
-}
+}

packages/vite-plugin-shopify-modules/.eslintignore

@@ -0,0 +1 @@
+dist

packages/vite-plugin-shopify-modules/README.md

@@ -0,0 +1,78 @@
+# vite-plugin-shopify-modules
+
+This plugin enables Shopify theme developers to structure their code into "module" folders which keep Liquid template files (snippets and sections) organized together with their corresponding JS or CSS, while retaining the standard file structure of Shopify themes.
+
+## Features
+
+* Automatically associates each module folder with the matching snippet or section files based on file name
+* Generates symbolic links to corresponding liquid files from module folders
+* Moves liquid files created within module folders to correct theme folders and replaces them with symlinks
+* Fully compatible with Shopify GitHub integration and Shopify CLI features for syncing updates from remote theme
+
+## Install
+
+```bash
+npm i vite-plugin-shopify-modules -D
+
+# yarn
+yarn add vite-plugin-shopify-modules -D
+
+# pnp
+pnpm add vite-plugin-shopify-modules -D
+
+```
+
+## Usage
+
+Add `shopifyModules` plugin to vite.config.js / vite.config.ts:
+
+```ts
+// vite.config.js / vite.config.ts
+import { shopifyModules } from 'vite-plugin-shopify-modules'
+
+export default {
+  plugins: [
+    shopifyModules({
+      // Default options shown:
+      modulesDir: 'modules'
+    })
+  ]
+}
+```
+
+- Create a "modules" folder alongside your theme folders, or use the `modulesDir` plugin option to specify an alternate location.
+- Create a subfolder for each theme module. The folder name should precisely match the filename of the corresponding liquid section and/or snippet file.
+- If a section or snippet file exists matching the module folder name, a symlink will be generated pointing from the module folder to the actual file.
+- If a file matching the `[module-name].section.liquid` or `[module-name].snippet.liquid` naming convention is found in the module folder, it will be moved to the corresponding theme folder and replaced with a symlink.
+- You can place any other files in the module folder and they will not be affected by the plugin. If you add JS or CSS, make sure these files are imported from an entrypoint file somewhere to include them in the bundled output.
+
+```bash
+my-theme
+  ├── assets
+  │── config
+  │── layout
+  │── locales
+  │── modules
+  │   └── cart-drawer
+  │       └── cart-drawer.js
+  │       └── cart-drawer.css
+  │       └── cart-drawer.section.liquid # Symlink to /sections/cart-drawer.liquid
+  │       └── cart-drawer.snippet.liquid # Symlink to /snippets/cart-drawer.liquid
+  │── sections
+  │   └── cart-drawer.liquid
+  │── snippets
+  │   └── cart-drawer.liquid
+  └── templates
+```
+
+## Example
+
+See [seed-theme](https://github.com/barrel/barrel-shopify/tree/main/packages/seed-theme) for an example Shopify theme using this plugin.
+
+## To-Do
+
+- [ ] Unit tests
+
+## Bugs
+
+Please create an issue if you found any bugs, to help me improve this project!

packages/vite-plugin-shopify-modules/package.json

@@ -1 +1,42 @@
-{}
+{
+  "name": "vite-plugin-shopify-modules",
+  "version": "0.0.0",
+  "description": "Vite plugin for organizing Shopify theme code into modules",
+  "keywords": [
+    "vite",
+    "shopify",
+    "vite-plugin"
+  ],
+  "author": "Barrel, LLC",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "npm run build -- --watch",
+    "build": "tsup src/index.ts --dts --format cjs,esm",
+    "watch": "tsup src/index.ts --dts --format cjs,esm --watch",
+    "lint": "eslint ."
+  },
+  "devDependencies": {
+    "tsconfig": "workspace:*",
+    "vite": "3.0.0-beta.0"
+  },
+  "peerDependencies": {
+    "vite": "3.0.0-beta.0"
+  },
+  "dependencies": {
+    "chokidar": "^3.5.3",
+    "lodash": "^4.17.21"
+  }
+}