@storepress/create-plugin-html 0.0.1

package/README.md

@@ -0,0 +1,34 @@
+# @storepress/create-plugin-html
+
+This is a template for [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) to create StorePress Plugin.
+
+## Usage
+
+This template can be used by running the following command:
+
+```bash
+npx @wordpress/create-block@latest --template @storepress/create-plugin-html my-extension-name
+```
+
+Navigate to the newly created folder and get started.
+
+```
+cd my-extension-name
+npm i                    # Install dependencies
+npm run build            # Build the javascript
+npx @wp-now/wp-now start # Start Wordpress environment
+```
+
+## Development
+
+For development on this tool itself, you can also install from a local directory.
+
+```bash
+npx @wordpress/create-block@latest --template ./path/to/storepress/create-plugin-html my-extension-name
+```
+
+### Add Tests
+
+Please check [Base Plugin](https://github.com/EmranAhmed/storepress-base-plugin/) to add `test` and others.
+
+This is a template to used with [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) to create a StorePress Plugin starting point.

package/block-templates/Plugin.js.mustache

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { getOptionsFromAttribute, triggerEvent } from '@storepress/utils'
+
+export function Plugin (element, options) {
+  // Default Settings
+  const DEFAULTS = {}
+
+  const PRIVATE = {}
+
+  // Collecting settings from html attribute
+  const ATTRIBUTE = 'plugin-settings' //
+
+  const CLASSES = {}
+
+  // Do what you need and return expose fn.
+  const init = () => {
+    this.$element = element
+    this.settings = {
+      ...DEFAULTS, ...options, ...getOptionsFromAttribute(this.$element, ATTRIBUTE), ...PRIVATE,
+    }
+
+    initial()
+
+    addClasses()
+
+    addEvents()
+
+    return expose()
+  }
+
+  const noop = () => () => {}
+
+  const getElementComputedStyle = (cssProperty) => {
+    return window.getComputedStyle(this.$element).getPropertyValue(cssProperty)
+  }
+
+  const getComputedStyle = ($element, property) => {
+    return window.getComputedStyle($element).getPropertyValue(property)
+  }
+
+  const initial = () => {
+	console.log(this.settings)
+    triggerEvent(this.$element, 'afterInit', {})
+  }
+
+  const cssVariableIsTrue = (string) => {
+    return string === 'true' || string === '1' || string === 'yes'
+  }
+  const addClasses = () => {
+
+  }
+
+  const removeClasses = () => {
+
+  }
+
+  const addEvents = () => {
+
+  }
+
+  const removeEvents = () => {
+
+  }
+
+  const reset = () => {
+    removeClasses()
+    removeEvents()
+  }
+
+  // Expose to public.
+  const expose = () => ({
+    removeEvents, reset,
+  })
+
+  return init()
+}

package/block-templates/_mixins.scss.mustache

@@ -0,0 +1,53 @@
+@property --custom-variable {
+  syntax: "<integer>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --custom-variable-2 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --custom-variable-3 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #000;
+}
+
+@property --custom-variable-4 {
+  syntax: "<length>|<percentage>|auto";
+  inherits: true;
+  initial-value: 100%;
+}
+
+@property --custom-variable-5 {
+  syntax: "true|false";
+  inherits: true;
+  initial-value: true;
+}
+
+@property --custom-variable-6 {
+  syntax: "<time>";
+  inherits: true;
+  initial-value: 500ms;
+}
+
+@mixin variables() {
+  --custom-variable: 5px;
+}
+
+@mixin base-style() {
+
+}
+
+// @use "./mixins" as plugin;
+// :where(.selector){ @include plugin.init(); }
+
+@mixin init() {
+  & {
+    @include variables();
+    @include base-style();
+  }
+}

package/block-templates/index.js.mustache

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { createPluginInstance, triggerEvent } from '@storepress/utils'
+
+/**
+ * Internal dependencies
+ */
+import { Plugin } from './Plugin'
+
+export default function StorePressPlugin () {
+  const StorePressPlugin = {
+    getInstance (element) {
+      return createPluginInstance(element, false, Plugin)
+    },
+
+    initWith ($selector = '[data-plugin-settings]') {
+      for (const { element, unregister } of this.getInstance($selector)) {
+        element.addEventListener('destroy', unregister)
+      }
+    },
+
+    init () {
+      for (const { element, unregister } of this.getInstance('[data-plugin-settings]')) {
+        element.addEventListener('destroy', unregister)
+      }
+    },
+
+    destroy () {
+      for (const { destroy } of this.getInstance('[data-plugin-settings]')) {
+        destroy()
+      }
+    },
+
+    destroyWith ($selector = '[data-plugin-settings]') {
+      for (const { destroy } of this.getInstance($selector)) {
+        destroy()
+      }
+    },
+  }
+
+  document.addEventListener('storepress_plugin_init', () => {
+    StorePressPlugin.init()
+  })
+
+  document.addEventListener('storepress_plugin_destroy', () => {
+    StorePressPlugin.destroy()
+  })
+
+  document.addEventListener('storepress_plugin_init_with', (event) => {
+    const selector = event.detail?.element
+    StorePressPlugin.initWith(selector)
+  })
+
+  document.addEventListener('storepress_plugin_destroy_with', (event) => {
+    const selector = event.detail?.element
+    StorePressPlugin.destroyWith(selector)
+  })
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  StorePressPlugin()
+  triggerEvent(document, 'storepress_plugin_init')
+})

package/block-templates/style.scss.mustache

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@use "./mixins" as plugin;
+
+$default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+
+:where([data-plugin-settings]) {
+  font-family: $default-font;
+
+  @include plugin.init();
+
+  & {
+    --custom-variable: 1px;
+  }
+}

package/index.js

@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+const { join } = require('path')
+
+// two-words
+function kebabCase (input) {
+  const regex = /[-._\s+]/gi
+  return input.replace(regex, '-').toLowerCase()
+}
+
+function constantCase (input) {
+  const regex = /[-._\s+]/gi
+  return input.replace(regex, '_').toUpperCase()
+}
+
+function pascalStorePress (input) {
+  return 'storepress' === input ? 'StorePress' : input
+}
+
+function pascalCase (input) {
+  return (input.match(/[a-zA-Z0-9]+/g) || []).map(w => `${w.charAt(0).toUpperCase()}${w.slice(1)}`).join('')
+}
+
+module.exports = {
+  defaultValues: {
+    folderName: 'src',
+    namespace: 'storepress',
+    slug: 'plugin',
+    version: '0.1.0',
+    title: 'StorePress Plugin',
+    description: 'A StorePress Plugin',
+    author: 'EmranAhmed',
+    dashicon: 'pets',
+    category: 'storepress',
+    attributes: {},
+    license: 'GPL-2.0-or-later',
+    customScripts: {
+      'postinstall': 'git init -q && rm -rf ./.husky && npx husky init && echo "npx lint-staged" > .husky/pre-commit',
+
+      'prebuild': 'rm -rf ./build',
+      'build': 'npm run start -- --no-watch && wp-scripts build --webpack-copy-php --experimental-modules',
+
+      'check-engines': 'wp-scripts check-engines',
+      'check-licenses': 'wp-scripts check-licenses',
+
+      'format': 'wp-scripts format ./src',
+      'format:all': 'npm run format:php && npm run format:css && npm run format:js',
+      'format:js': 'wp-scripts format \'./src/**/*.js\'',
+      'format:css': 'wp-scripts format \'./src/**/*.scss\'',
+
+      'lint:css': 'wp-scripts lint-style \'./src/**/*.scss\'',
+      'lint:css:report': 'npm run lint:css -- --output-file scss-report.txt',
+      'lint:css:fix': 'npm run lint:css -- --fix',
+
+      'lint:js': 'wp-scripts lint-js --format=pretty \'./src/**/*.js\'',
+      'lint:js:report': 'npm run lint:js -- --format html --output-file lint-report.html',
+      'lint:js:fix': 'npm run lint:js -- --fix',
+
+      'lint:md:docs': 'wp-scripts lint-md-docs',
+      'lint:pkg-json': 'wp-scripts lint-pkg-json',
+
+      'packages-update': 'wp-scripts packages-update',
+
+      'prepackage': 'rm -rf ./${npm_package_name}.zip && npm run build',
+      'package': './tools/package.js',
+
+      'plugin-zip': 'npm run package -- --zip',
+
+      'test:e2e': 'wp-scripts test-e2e',
+      'test:unit': 'wp-scripts test-unit-js',
+
+      'start': 'rm -rf ./build && wp-scripts start --webpack-copy-php --experimental-modules',
+    },
+    npmDependencies: [
+      '@storepress/utils',
+    ],
+    npmDevDependencies: [
+      '@wordpress/scripts',
+      '@woocommerce/dependency-extraction-webpack-plugin',
+      '@woocommerce/eslint-plugin',
+      '@wordpress/base-styles',
+      '@wordpress/dependency-extraction-webpack-plugin',
+      'eslint-plugin-you-dont-need-lodash-underscore',
+      'husky',
+      'lint-staged',
+      'fs-extra',
+      'webpack-remove-empty-scripts',
+      'eslint-plugin-prettier',
+      'eslint-formatter-pretty@5',
+    ],
+    customPackageJSON: {
+      'publishConfig': {
+        'access': 'public',
+      },
+      'sideEffects': [
+        'src/**',
+      ],
+      'lint-staged': {
+        './src/**/*.scss': [
+          'npm run lint:css',
+        ],
+        './src/**/*.{js,ts,tsx}': [
+          'npm run lint:js',
+        ],
+        './*.md': [
+          'npm run lint:md:docs',
+        ],
+        './package.json': [
+          'npm run lint:pkg-json',
+        ],
+      },
+      'main': 'build/index.js',
+      'module': 'src/index.js',
+      'files': [
+        'build/**',
+        'src/**',
+      ],
+      'bin': {
+        'package': './tools/package.js',
+      },
+    },
+    transformer: (view) => {
+      const todayDate = new Date().toJSON().slice(0, 10)
+      const pascaleNamespace = pascalCase(pascalStorePress(view.namespace))
+      const constantNamespace = constantCase(view.namespace)
+      const kebabNamespace = kebabCase(view.namespace)
+      const constantSlug = constantCase(view.slug) // TWO_WORDS
+      const kebabSlug = kebabCase(view.slug) // two-words
+      return {
+        ...view,
+        todayDate: todayDate,
+        constantNamespace: constantNamespace,
+        kebabNamespace: kebabNamespace,
+        pascaleNamespace: pascaleNamespace,
+
+        constantSlug: constantSlug,
+        kebabSlug: kebabSlug,
+      }
+    },
+  },
+  pluginTemplatesPath: join(__dirname, 'plugin-templates'),
+  blockTemplatesPath: join(__dirname, 'block-templates'),
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+	"name": "@storepress/create-plugin-html",
+	"version": "0.0.1",
+	"description": "A template to be used with `@wordpress/create-block` to create a StorePress HTML based JS Extension.",
+	"author": "StorePress",
+	"main": "index.js",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/EmranAhmed/storepress-create-plugin-html.git"
+	},
+	"keywords": ["html", "dom", "javascript", "storepress"],
+	"license": "GPL-2.0-or-later",
+	"bugs": {
+		"url": "https://github.com/EmranAhmed/storepress-create-plugin-html/issues"
+	},
+	"homepage": "https://github.com/EmranAhmed/storepress-create-plugin-html#readme",
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/plugin-templates/.editorconfig.mustache

@@ -0,0 +1,27 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset                  = utf-8
+end_of_line              = lf
+indent_size              = 4
+tab_width                = 4
+indent_style             = tab
+insert_final_newline     = true
+trim_trailing_whitespace = true
+
+[*.txt]
+trim_trailing_whitespace = false
+
+[*.{md,json,yml}]
+trim_trailing_whitespace = false
+indent_style             = space
+indent_size              = 2
+
+[*.json]
+indent_style = tab

package/plugin-templates/.eslintrc.js.mustache

@@ -0,0 +1,196 @@
+const restrictedImports = [
+	{
+		name: 'lodash',
+		importNames: [
+			'camelCase',
+			'capitalize',
+			'castArray',
+			'chunk',
+			'clamp',
+			'clone',
+			'cloneDeep',
+			'compact',
+			'concat',
+			'countBy',
+			'debounce',
+			'deburr',
+			'defaults',
+			'defaultTo',
+			'delay',
+			'difference',
+			'differenceWith',
+			'dropRight',
+			'each',
+			'escape',
+			'escapeRegExp',
+			'every',
+			'extend',
+			'filter',
+			'find',
+			'findIndex',
+			'findKey',
+			'findLast',
+			'first',
+			'flatMap',
+			'flatten',
+			'flattenDeep',
+			'flow',
+			'flowRight',
+			'forEach',
+			'fromPairs',
+			'has',
+			'identity',
+			'includes',
+			'invoke',
+			'isArray',
+			'isBoolean',
+			'isEqual',
+			'isFinite',
+			'isFunction',
+			'isMatch',
+			'isNil',
+			'isNumber',
+			'isObject',
+			'isObjectLike',
+			'isPlainObject',
+			'isString',
+			'isUndefined',
+			'keyBy',
+			'keys',
+			'last',
+			'lowerCase',
+			'map',
+			'mapKeys',
+			'maxBy',
+			'memoize',
+			'merge',
+			'negate',
+			'noop',
+			'nth',
+			'omit',
+			'omitBy',
+			'once',
+			'orderby',
+			'overEvery',
+			'partial',
+			'partialRight',
+			'pick',
+			'pickBy',
+			'random',
+			'reduce',
+			'reject',
+			'repeat',
+			'reverse',
+			'setWith',
+			'size',
+			'snakeCase',
+			'some',
+			'sortBy',
+			'startCase',
+			'startsWith',
+			'stubFalse',
+			'stubTrue',
+			'sum',
+			'sumBy',
+			'take',
+			'throttle',
+			'times',
+			'toString',
+			'trim',
+			'truncate',
+			'unescape',
+			'unionBy',
+			'uniq',
+			'uniqBy',
+			'uniqueId',
+			'uniqWith',
+			'upperFirst',
+			'values',
+			'without',
+			'words',
+			'xor',
+			'zip',
+		],
+		message:
+			'This Lodash method is not recommended. Please use native functionality instead. If using `memoize`, please use `memize` instead.',
+	},
+	{
+		name: 'classnames',
+		message:
+			"Please use `clsx` instead. It's a lighter and faster drop-in replacement for `classnames`.",
+	},
+];
+
+module.exports = {
+	root: true,
+	extends: [
+		'plugin:@woocommerce/eslint-plugin/recommended',
+		'plugin:you-dont-need-lodash-underscore/compatible',
+	],
+	settings: {
+		// List of modules that are externals in our webpack config.
+		// This helps the `import/no-extraneous-dependencies` and
+		//`import/no-unresolved` rules account for them.
+		'import/core-modules': [
+			'@woocommerce/blocks-registry',
+			'@wordpress/is-shallow-equal',
+			'@woocommerce/block-data',
+			'@woocommerce/blocks-checkout',
+			'@woocommerce/price-format',
+			'@woocommerce/settings',
+			'@woocommerce/shared-context',
+			'@woocommerce/shared-hocs',
+			'@woocommerce/data',
+			'@wordpress/components',
+			'@wordpress/i18n',
+			'@wordpress/blocks',
+			'@wordpress/a11y',
+			'@wordpress/api-fetch',
+			'@wordpress/block-editor',
+			'@wordpress/compose',
+			'@wordpress/data',
+			'@wordpress/core-data',
+			'@wordpress/editor',
+			'@wordpress/escape-html',
+			'@wordpress/hooks',
+			'@wordpress/keycodes',
+			'@wordpress/url',
+			'@wordpress/element',
+			'@woocommerce/blocks-test-utils',
+			'@woocommerce/e2e-utils',
+			'lodash',
+			'jquery',
+			'@storepress/utils',
+			'@utils', // See: getWebPackAlias() from tools/webpack-helpers.js
+		],
+		'import/resolver': {
+			node: {},
+			webpack: {},
+        },
+	},
+	env: {
+		browser: true,
+		es6: true,
+		node: true,
+	},
+	globals: {
+		jQuery: 'readonly',
+		wp: true,
+		wpApiSettings: true,
+		wcSettings: true,
+		es6: true,
+		StorePress: true,
+	},
+	rules: {
+		'@woocommerce/dependency-group': 'off',
+		'@wordpress/no-unsafe-wp-apis': 'warn',
+		'react/react-in-jsx-scope': 'off',
+		'no-restricted-imports': [
+			'error',
+			{
+				paths: restrictedImports,
+			},
+		],
+		'@wordpress/no-global-active-element': 'warn'
+	},
+};

package/plugin-templates/.github/workflows/deploy-github-pages.yaml.mustache

@@ -0,0 +1,52 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: [$default-branch]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # Set up Node
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - name: Install and Build
+        run: |
+          npm install
+          npm run build
+      #- name: Setup Pages
+      #  uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/plugin-templates/.github/workflows/release.yaml.mustache

@@ -0,0 +1,62 @@
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+      - '**' # Push events to matching  i.e. 1.0, 20.15.10, including hierarchical tags like v1.0/beta
+      # Semver (https://semver.org/) release pattern.
+      # - '[0-9]+.[0-9]+.[0-9]+*'
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions: write-all
+
+env:
+  REPOSITORY_NAME: ${{ github.event.repository.name }}
+
+name: Release
+
+jobs:
+
+
+  # Build distribution release.
+  #
+  # Performs the following steps:
+  # - Checks out the repository.
+  # - Set up PHP.
+  # - Install PHP Dependencies.
+  # - Setup and Install Node.js.
+  # - Make Zip.
+  # - Upload Release.
+
+
+  build:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checks out the repository"
+        uses: actions/checkout@v4
+
+      - name: "Setup and Install Node.js"
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+      - run: npm clean-install
+
+      - name: "Make Zip"
+        run: npm run plugin-zip --if-present
+
+      - name: "Get release version."
+        run: |
+          echo "RELEASE_TAG=$(node -p -e "require('./package.json').version")" >> $GITHUB_ENV
+
+      - name: "Get release file base name."
+        run: |
+          echo "RELEASE_NAME=$(node -p -e "require('./package.json').name")" >> $GITHUB_ENV
+
+      - name: "Upload Release"
+        uses: softprops/action-gh-release@v2
+        with:
+          files: ./${{ env.RELEASE_NAME }}.zip
+          make_latest: true
+          name: Release - v${{ env.RELEASE_TAG }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/plugin-templates/.gitignore.mustache

@@ -0,0 +1,67 @@
+
+# Operating System files
+.DS_Store
+Thumbs.db
+
+# IDE files
+.idea
+.vscode/*
+project.xml
+project.properties
+.project
+.settings*
+*.sublime-project
+*.sublime-workspace
+.sublimelinterrc
+.husky/_
+src/block.json
+
+# Sass
+.sass-cache/
+
+# Logs
+logs/
+
+# Environment files
+wp-cli.local.yml
+yarn-error.log
+npm-debug.log
+.pnpm-debug.log
+*.lock
+
+# Build files
+*.sql
+*.swp
+*.zip
+
+# Built packages
+build/
+build-module/
+build-style/
+build-types/
+dist/
+
+# Project files
+node_modules/
+vendor/
+languages/
+{{slug}}/
+
+# TypeScript files
+tsconfig.tsbuildinfo
+
+# Node Package Dependencies
+# package-lock.json
+
+# wp-env config
+.wp-env.override.json
+
+# Unit tests
+tmp/
+
+# Composer
+bin/composer/**/vendor/
+lib/vendor/
+contributors.md
+contributors.html
+*-report*

package/plugin-templates/.husky/pre-commit.mustache

@@ -0,0 +1 @@
+npx lint-staged

package/plugin-templates/.npmrc.mustache

@@ -0,0 +1 @@
+

package/plugin-templates/.prettierrc.json.mustache

@@ -0,0 +1 @@
+"@wordpress/prettier-config"

package/plugin-templates/.stylelintrc.json.mustache

@@ -0,0 +1,28 @@
+{
+	"extends" : "@wordpress/stylelint-config/scss",
+	"syntax" : "scss",
+	"rules": {
+		"at-rule-empty-line-before" : null,
+		"at-rule-no-unknown" : null,
+		"comment-empty-line-before" : null,
+		"font-weight-notation" : null,
+		"font-family-name-quotes" : "always-unless-keyword",
+		"font-family-no-missing-generic-family-keyword" : null,
+		"no-descending-specificity" : null,
+		"no-duplicate-selectors" : null,
+		"rule-empty-line-before" : null,
+		"selector-class-pattern" : null,
+		"value-keyword-case" : null,
+		"scss/operator-no-unspaced" : null,
+		"scss/selector-no-redundant-nesting-selector" : null,
+		"scss/at-import-partial-extension" : null,
+		"scss/no-global-function-names" : null,
+		"scss/comment-no-empty" : null,
+		"scss/at-extend-no-missing-placeholder" : null,
+		"scss/operator-no-newline-after" : null,
+		"scss/at-if-closing-brace-newline-after" : null,
+		"scss/at-else-empty-line-before" : null,
+		"scss/at-if-closing-brace-space-after" : null,
+		"no-invalid-position-at-import-rule" : null
+	}
+}

package/plugin-templates/README.md.mustache

@@ -0,0 +1,34 @@
+# {{title}}
+
+{{description}}
+
+## Development
+- `npm i`
+- `npm run packages-update` - Update WordPress packages
+
+## Develop
+
+- `npm start`
+
+## Lint
+
+- `npm run lint:js` - Lint Javascript
+- `npm run lint:js:report` - Lint Javascript and will generate `lint-report.html`. From terminal `open lint-report.html`
+- `npm run lint:css` - Lint CSS
+- `npm run lint:css:report` - Lint CSS and will generate `scss-report.txt` file.
+
+## Fix
+
+- `npm run lint:js:fix` - Fix Javascript Lint Issue.
+- `npm run lint:css:fix` - Fix SCSS Lint Issue.
+
+## Format
+
+- `npm run format:js` - Format Javascript
+- `npm run format:css` - Format SCSS
+- `npm run format` - Format `./src`
+
+## Release
+
+- `npm run plugin-zip` - make zip based on `package.json` `files` list.
+- `npm run package` - make directory based on `package.json` `files` list.

package/plugin-templates/index.html.mustache

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{{title}}</title>
+	<link rel="stylesheet" href="./build/style-plugin.css" />
+	<link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+
+<div class="wrapper">
+	<div data-plugin-settings="{'greet': 'Hello'}">Hello ( Check Browser Console )</div>
+</div>
+
+<script src="./build/storepress-utils.js"></script>
+<script src="./build/plugin.js"></script>
+</body>
+</html>

package/plugin-templates/postcss.config.js.mustache

@@ -0,0 +1,6 @@
+module.exports = ( { env } ) => ( {
+	plugins: {
+		autoprefixer: { grid: true },
+		cssnano: env === 'production',
+	},
+} );

package/plugin-templates/style.css.mustache

@@ -0,0 +1,14 @@
+body {
+    font-family: sans-serif;
+}
+
+.wrapper {
+    width: 80%;
+    height: 80dvh;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    margin-inline: auto;
+}

package/plugin-templates/tools/package.js.mustache

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+'use strict';
+/**
+ * External dependencies
+ */
+const AdmZip = require('adm-zip');
+const { sync: glob } = require('fast-glob');
+const { dirname } = require('path');
+const { stdout } = require('process');
+const fs = require('fs-extra');
+/**
+ * Internal dependencies
+ */
+
+const {
+	hasPackageProp,
+	getPackageProp,
+	hasArgInCLI,
+} = require('@wordpress/scripts/utils');
+
+const npm_package_name = getPackageProp('name');
+const npm_package_version = getPackageProp('version');
+
+stdout.write(`Creating package for \`${npm_package_name}\` plugin... 🎁\n\n`);
+const zip = new AdmZip();
+const isZip = hasArgInCLI('--zip');
+
+let files = [];
+
+if (hasPackageProp('files')) {
+	stdout.write(
+		'Using the `files` field from `package.json` to detect files:\n\n'
+	);
+
+	files = glob(getPackageProp('files'), {
+		caseSensitiveMatch: false,
+	});
+} else {
+	stdout.write('Using Plugin Handbook best practices to discover files:\n\n');
+	// See https://developer.wordpress.org/plugins/plugin-basics/best-practices/#file-organization.
+	files = glob(
+		[
+			'admin/**',
+			'build/**',
+			'includes/**',
+			'languages/**',
+			'public/**',
+			`${npm_package_name}.php`,
+			'uninstall.php',
+			'block.json',
+			'changelog.*',
+			'license.*',
+			'readme.*',
+		],
+		{
+			caseSensitiveMatch: false,
+		}
+	);
+}
+
+if (isZip) {
+	stdout.write(
+		`Creating archive for \`${npm_package_name}\` plugin... 🎁\n\n`
+	);
+	files.forEach((file) => {
+		stdout.write(`  🥳 Adding \`${file}\`.\n`);
+		const zipDirectory = dirname(file);
+		zip.addLocalFile(file, zipDirectory !== '.' ? zipDirectory : '');
+	});
+
+	zip.writeZip(`./${npm_package_name}.zip`);
+	stdout.write(`\nDone. \`${npm_package_name}.zip\` is ready! 🎉\n`);
+} else {
+	fs.remove(npm_package_name).then(() => {
+		fs.ensureDir(npm_package_name, () => {
+			stdout.write(
+				`Creating directory for \`${npm_package_name}\` plugin... 🎁\n\n`
+			);
+
+			files.forEach((file) => {
+				const to = `${npm_package_name}/${file}`;
+				stdout.write(`  🥳 Adding \`${file}\`.\n`);
+				fs.copy(file, to);
+			});
+
+			stdout.write(
+				`\n\nDone. \`${npm_package_name}\` directory is ready! 🎉\n`
+			);
+		});
+	});
+}

package/plugin-templates/tools/webpack-helpers.js.mustache

@@ -0,0 +1,104 @@
+// @see: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dependency-extraction-webpack-plugin/
+/**
+ * External dependencies
+ */
+const { getProjectSourcePath } = require( '@wordpress/scripts/utils/config' );
+const { fromProjectRoot } = require( '@wordpress/scripts/utils/file' );
+const { sep } = require( 'path' );
+
+// jquery --> window.jQuery
+// react-dom --> window.ReactDOM
+// Add `slick-carousel`, `@woocommerce/blocks-registry`,`@woocommerce/settings` on `.eslintrc.js` -> 'import/core-modules'
+const externalScriptsMap = {
+    '@storepress/utils' : ['StorePress','Utils'],
+};
+
+// @babel/runtime/regenerator --> wp-polyfill
+const scriptHandleMap = {
+     '@storepress/utils' : 'storepress-utils',
+};
+
+const externalModulesMap = {
+	//  static import.
+	// '@wordpress/interactivity': 'module @wordpress/interactivity',
+	// dynamic import.
+	// @see: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/query/view.js#L36
+	// '@wordpress/interactivity-router': 'import @wordpress/interactivity-router',
+};
+
+/**
+ * Default request to global transformation
+ *
+ * Transform @wordpress dependencies:
+ * - request `@wordpress/api-fetch` becomes `[ 'wp', 'apiFetch' ]`
+ * - request `@wordpress/i18n` becomes `[ 'wp', 'i18n' ]`
+ *
+ * @param  {string} request Module request (the module name in `import from`) to be transformed
+ * @return {string|string[]|undefined} The resulting external definition. Return `undefined`
+ *   to ignore the request. Return `string|string[]` to map the request to an external.
+ */
+function requestToExternal( request ) {
+	if ( externalScriptsMap[ request ] ) {
+		return externalScriptsMap[ request ];
+	}
+}
+
+/**
+ * Default request to WordPress script handle transformation
+ *
+ * Transform @wordpress dependencies:
+ * - request `@wordpress/i18n` becomes `wp-i18n`
+ * - request `@wordpress/escape-html` becomes `wp-escape-html`
+ *
+ * @param  {string} request Module request (the module name in `import from`) to be transformed
+ * @return {string|undefined} WordPress script handle to map the request to. Return `undefined`
+ *   to use the same name as the module.
+ */
+function requestToHandle( request ) {
+	if ( scriptHandleMap[ request ] ) {
+		return scriptHandleMap[ request ];
+	}
+}
+
+/**
+ * Default request to external module transformation
+ *
+ * Currently Supports:
+ * - @wordpress/interactivity
+ * - @wordpress/interactivity-router
+ *
+ * Do not use the boolean shorthand here, it's only handled for the
+ * `requestToExternalModule` option.
+ *
+ * @param {string} request Module request (the module name in `import from`) to be transformed
+ * @return {string|Error|undefined} The resulting external definition.
+ *   - Return `undefined` to ignore the request (do not externalize).
+ *   - Return `string` to map the request to an external.
+ *   - Return `Error` to emit an error.
+ */
+function requestToExternalModule( request ) {
+	if ( externalModulesMap[ request ] ) {
+		return externalModulesMap[ request ];
+	}
+}
+
+function getFile( fileName ) {
+	return fromProjectRoot( getProjectSourcePath() + sep + fileName );
+}
+
+function getWebPackAlias() {
+	return {
+		// '@utils': getFile('utils/Plugin'), // Add @utils on .eslintrc.js -> 'import/core-modules'
+		//'@storepress/icons': getFile('packages/icons'),
+		//'@storepress/utils': getFile('packages/utils'),
+		//'@storepress/components': getFile('packages/components'),
+	};
+}
+
+module.exports = {
+	getFile,
+	getWebPackAlias,
+	requestToExternal,
+	requestToHandle,
+	requestToExternalModule,
+};

package/plugin-templates/webpack.config.js.mustache

@@ -0,0 +1,97 @@
+const [
+	defaultJSConfig,
+	defaultModuleConfig,
+] = require( '@wordpress/scripts/config/webpack.config' );
+const {
+	requestToExternal,
+	requestToHandle,
+	requestToExternalModule,
+	getFile,
+	getWebPackAlias,
+} = require( './tools/webpack-helpers' );
+const WoocommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
+
+const scriptConfig = {
+	...defaultJSConfig,
+	entry: {
+		[`plugin`]: [
+			getFile('style.scss'),
+			getFile('index.js'),
+        ],
+        'storepress-utils': {
+			import: '@storepress/utils/build-module/index.js',
+			library: {
+				name: ['StorePress','Utils'],
+				type: 'window'
+			},
+		}
+	},
+
+	resolve: {
+		...defaultJSConfig.resolve,
+		alias: {
+			...defaultJSConfig.resolve.alias,
+			...getWebPackAlias(),
+		},
+	},
+
+	plugins: [
+		// ...defaultJSConfig.plugins,
+		...defaultJSConfig.plugins.filter(
+			( plugin ) =>
+				plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
+		),
+		new WoocommerceDependencyExtractionWebpackPlugin( {
+			requestToExternal,
+			requestToHandle,
+			requestToExternalModule,
+		} ),
+
+		// Removes the empty `.js` files generated by webpack but
+		// sets it after WP has generated its `*.asset.php` file.
+		new RemoveEmptyScriptsPlugin( {
+			stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
+		} ),
+	]
+};
+
+const moduleConfig = {
+	...defaultModuleConfig,
+	output: { ...defaultModuleConfig.output, module: true },
+	experiments: { outputModule: true },
+	entry: {
+		// ...defaultModuleConfig.entry(),
+		// 'custom-module': getFile( 'custom-module.js' ),
+	},
+
+	resolve: {
+		...defaultModuleConfig.resolve,
+		alias: {
+			...defaultModuleConfig.resolve.alias,
+			...getWebPackAlias(),
+		},
+	},
+
+	plugins: [
+		// ...defaultModuleConfig.plugins,
+		...defaultModuleConfig.plugins.filter(
+			( plugin ) =>
+				plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
+		),
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternal,
+			requestToHandle,
+			requestToExternalModule,
+		} ),
+
+		// Removes the empty `.js` files generated by webpack but
+		// sets it after WP has generated its `*.asset.php` file.
+		new RemoveEmptyScriptsPlugin( {
+			stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
+		} ),
+	],
+};
+
+module.exports = [ scriptConfig, moduleConfig ];