@storepress/create-plugin-html 0.0.5 → 0.1.0

package/README.md

@@ -7,17 +7,15 @@ This is a template for [`@wordpress/create-block`](https://developer.wordpress.o
 This template can be used by running the following command:
 
 ```bash
-npx @wordpress/create-block@latest --template @storepress/create-plugin-html my-extension-name
+npx -y @wordpress/create-block@latest --template @storepress/create-plugin-html --no-wp-scripts my-html-extension-name && cd "$_"
 ```
 
 Navigate to the newly created folder and get started.
 
 ```
-cd my-extension-name
-npm i prettier@npm:wp-prettier@latest --save-dev
-npm i                    # Install dependencies
-npm run build            # Build the javascript
-npx @wp-now/wp-now start # Start Wordpress environment
+npm i && npm run packages-update   # Install dependencies and Update package dependency
+npm run build                      # Build the javascript
+npx -y http-server                 # Start Server
 ```
 
 ## Development
@@ -25,7 +23,7 @@ npx @wp-now/wp-now start # Start Wordpress environment
 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
+npx -y @wordpress/create-block@latest --template ./path/to/storepress/create-plugin-html --no-wp-scripts my-html-extension-name && cd "$_"
 ```
 
 ### Add Tests

package/index.js

@@ -1,141 +1,152 @@
 /**
  * External dependencies
  */
-const { join } = require('path')
+const {join} = require('path')
 
 // two-words
-function kebabCase (input) {
-  const regex = /[-._\s+]/gi
-  return input.replace(regex, '-').toLowerCase()
+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 constantCase(input) {
+    const regex = /[-._\s+]/gi
+    return input.replace(regex, '_').toUpperCase()
 }
 
-function pascalStorePress (input) {
-  return 'storepress' === input ? 'StorePress' : input
+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('')
+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.0.1',
-    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 && rimraf .husky && npx husky init && echo "npx lint-staged" > .husky/pre-commit',
-
-      'prebuild': 'rimraf 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': 'rimraf ${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': 'rimraf build && wp-scripts start --webpack-copy-php --experimental-modules',
+    defaultValues       : {
+        folderName         : 'src',
+        namespace          : 'storepress',
+        slug               : 'plugin',
+        version            : '0.0.1',
+        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 && rimraf .husky && npx husky init && echo "npx lint-staged" > .husky/pre-commit',
+
+            'prebuild' : 'rimraf build && npm run external:build',
+            'build'    : '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-install:all"       : "node ./tools/packages-install.js",
+            "packages-update:storepress" : "node ./tools/packages-update.js",
+
+            "packages-update" : "wp-scripts packages-update && npm run packages-update:storepress && npm run packages-install:all",
+
+            'prepackage' : 'rimraf ${npm_package_name}.zip && npm run build',
+            'package'    : 'node ./tools/package.js',
+
+            'plugin-zip' : 'npm run package -- --zip',
+
+            'test:e2e'  : 'wp-scripts test-e2e',
+            'test:unit' : 'wp-scripts test-unit-js',
+
+            "external:dev": "wp-scripts start --no-watch --config tools/webpack.config.externals.js --experimental-modules --webpack-no-externals",
+            "external:build": "wp-scripts build --config tools/webpack.config.externals.js --experimental-modules --webpack-no-externals",
+
+            'prestart' : 'rimraf build && npm run external:dev',
+            'start' : 'wp-scripts start --webpack-copy-php --experimental-modules',
+        },
+        npmDependencies    : [
+            '@storepress/utils',
+            '@wordpress/element',
+            '@wordpress/interactivity',
+        ],
+        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',
+            "prettier@npm:wp-prettier",
+            'fs-extra',
+            'webpack-remove-empty-scripts',
+            'eslint-plugin-prettier@5.2.1',
+            'eslint-formatter-pretty',
+            'rimraf',
+        ],
+        customPackageJSON  : {
+            'publishConfig' : {
+                'access' : 'public',
+            },
+            'sideEffects'   : [
+                'src/**',
+            ],
+            'main'          : 'build/index.js',
+            'module'        : 'src/index.js',
+            'files'         : [
+                'src/**',
+            ],
+            'zip'           : [
+                'build/**',
+                'index.html',
+                'index-module.html',
+            ],
+        },
+        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
+            const pascaleSlug       = pascalCase(pascalStorePress(view.slug)) // 'TwoWords'
+            return {
+                ...view,
+                name              : `@${kebabNamespace}/${kebabSlug}`,
+                todayDate         : todayDate,
+                constantNamespace : constantNamespace,
+                kebabNamespace    : kebabNamespace,
+                pascaleNamespace  : pascaleNamespace,
+
+                constantSlug : constantSlug,
+                kebabSlug    : kebabSlug,
+                pascaleSlug  : pascaleSlug,
+
+                GITHUB_REPOSITORY_NAME   : '${{ github.event.repository.name }}',
+                GITHUB_RELEASE_NAME      : '${{ env.RELEASE_NAME }}',
+                GITHUB_RELEASE_TAG       : '${{ env.RELEASE_TAG }}',
+                GITHUB_TOKEN             : '${{ secrets.GITHUB_TOKEN }}',
+                GITHUB_PAGE_URL          : '${{ steps.deployment.outputs.page_url }}',
+                GITHUB_CHANGELOG_CONTENT : "${{ steps.changelog.outputs.changelog }}",
+            }
+        },
     },
-    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',
-      "prettier@npm:wp-prettier",
-      'fs-extra',
-      'webpack-remove-empty-scripts',
-      'eslint-plugin-prettier@5.2.1',
-      'eslint-formatter-pretty',
-      'rimraf',
-    ],
-    customPackageJSON: {
-      'publishConfig': {
-        'access': 'public',
-      },
-      'sideEffects': [
-        'src/**',
-      ],
-      'main': 'build/index.js',
-      'module': 'src/index.js',
-      'files': [
-        'src/**',
-      ],
-      'zip': [
-        'build/**',
-        'index.html',
-        'global-style.css',
-      ],
-    },
-    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
-      const pascaleSlug = pascalCase(pascalStorePress(view.slug)) // 'TwoWords'
-      return {
-        ...view,
-        name: `@${kebabNamespace}/${kebabSlug}`,
-        todayDate: todayDate,
-        constantNamespace: constantNamespace,
-        kebabNamespace: kebabNamespace,
-        pascaleNamespace: pascaleNamespace,
-
-        constantSlug: constantSlug,
-        kebabSlug: kebabSlug,
-        pascaleSlug: pascaleSlug,
-        GITHUB_REPOSITORY_NAME: '${{ github.event.repository.name }}',
-        GITHUB_RELEASE_NAME: '${{ env.RELEASE_NAME }}',
-        GITHUB_RELEASE_TAG: '${{ env.RELEASE_TAG }}',
-        GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}',
-        GITHUB_PAGE_URL: '${{ steps.deployment.outputs.page_url }}',
-      }
-    },
-  },
-  pluginTemplatesPath: join(__dirname, 'plugin-templates'),
-  blockTemplatesPath: join(__dirname, 'block-templates'),
+    pluginTemplatesPath : join(__dirname, 'plugin-templates'),
+    blockTemplatesPath  : join(__dirname, 'block-templates'),
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@storepress/create-plugin-html",
-	"version": "0.0.5",
+	"version": "0.1.0",
 	"description": "A template to be used with `@wordpress/create-block` to create a StorePress HTML based JS Extension.",
 	"author": "StorePress",
 	"main": "index.js",

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

@@ -161,6 +161,7 @@ module.exports = {
 			'lodash',
 			'jquery',
 			'@storepress/utils',
+			'@storepress/html-plugin', // See: getWebPackAlias() from tools/webpack-helpers.js
 			'@utils', // See: getWebPackAlias() from tools/webpack-helpers.js
 		],
 		'import/resolver': {

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

@@ -25,6 +25,7 @@ jobs:
   # - Make Zip
   # - Get Release Version
   # - Get Release Filename
+  # - Get Changelog
   # - Make Release
 
   build:
@@ -53,11 +54,19 @@ jobs:
         run: |
           echo "RELEASE_NAME=$(node -p -e "require('./package.json').name")" >> $GITHUB_ENV
 
+      - name: "Get Changelog"
+        id: changelog
+        run: |
+            echo "changelog<<EOF" >> $GITHUB_OUTPUT
+            node ./tools/changelog.js >> $GITHUB_OUTPUT
+            echo "EOF" >> $GITHUB_OUTPUT
+
       - name: "Make Release"
         uses: softprops/action-gh-release@v2
         with:
           files: ./{{ GITHUB_RELEASE_NAME }}.zip
           make_latest: true
           name: Release - v{{ GITHUB_RELEASE_TAG }}
+          body: {{ GITHUB_CHANGELOG_CONTENT }}
         env:
           GITHUB_TOKEN: {{ GITHUB_TOKEN }}

package/plugin-templates/.gitignore.mustache

@@ -13,7 +13,7 @@ project.properties
 *.sublime-project
 *.sublime-workspace
 .sublimelinterrc
-.husky/_
+.husky
 src/block.json
 
 # Sass

package/plugin-templates/README.md.mustache

@@ -3,8 +3,11 @@
 {{description}}
 
 ## Development
+
 - `npm i`
-- `npm run packages-update` - Update WordPress packages
+- `npm run packages-update`  - Update WordPress packages
+- `npm run build`            - Build
+- `npx -y http-server`       - Start Server
 
 ## Develop
 

package/plugin-templates/changelog.txt.mustache

@@ -0,0 +1,12 @@
+*** {{title}} ***
+
+2023-09-30 - version 1.0.0
+* Added - add msg
+* Update - update msg
+* Fixed - fix msg
+* Tweak - what we tweak
+* Enhancement - add action / add filter
+* Performance - if any performance added
+
+2023-09-18 - version 1.0.0
+* Initial release

package/plugin-templates/index-module.html.mustache

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Standalone WordPress Package Usages</title>
+
+	<script type="importmap">
+		{
+			"imports": {
+				"@storepress/utils": "./build/storepress-utils-module.js"
+			}
+		}
+	</script>
+
+	<link rel="modulepreload" href="./build/storepress-utils-module.js" fetchpriority="low"/>
+</head>
+
+<body>
+
+<h2>StorePress Example as Module:</h2>
+
+<div data-storepress-plugin="{'greet': 'Hello'}">Hello ( Check Browser Console )</div>
+
+<p><a href="./index.html">Check using storepress plugin as script</a></p>
+
+<script type="module" src="./build/module-example.js"></script>
+
+</body>
+</html>

package/plugin-templates/index.html.mustache

@@ -3,18 +3,58 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>{{title}}</title>
-	<link rel="stylesheet" href="./global-style.css" />
-	<link rel="stylesheet" href="./build/style-plugin.css" />
+	<title>Standalone WordPress Package Usages</title>
+
+	<script type="importmap">
+		{
+			"imports": {
+				"@wordpress/interactivity": "./build/externals/modules/wp-interactivity.js"
+			}
+		}
+	</script>
+
+	<link rel="modulepreload" href="./build/externals/modules/wp-interactivity.js" fetchpriority="low"/>
 </head>
 
 <body>
 
-<div class="wrapper">
-	<div data-{{kebabSlug}}="{'greet': 'Hello'}">Hello ( Check Browser Console )</div>
+<h1>Example of WordPress Package Usage as Standalone</h1>
+<div id="wrapper"></div>
+
+
+<div
+	data-wp-interactive="my-app"
+	data-wp-context='{ "isOpen": false }'
+>
+	<h2>Interactive Counter: <span data-wp-text="state.count"></span></h2>
+	<button data-wp-on--click="actions.increment">+</button>
+	<button data-wp-on--click="actions.decrement">−</button>
+
+	<hr>
+
+	<button data-wp-on--click="actions.toggle">
+		<span data-wp-text="state.toggleText"></span>
+	</button>
+	<p data-wp-bind--hidden="!context.isOpen">
+		Hello from the Interactivity API! 🎉
+	</p>
 </div>
 
+
+<h2>StorePress Example:</h2>
+
+<div data-storepress-plugin="{'greet': 'Hello'}">Hello ( Check Browser Console )</div>
+
+<p><a href="./index-module.html">Check using storepress plugin as module</a></p>
+
+<script src="./build/externals/scripts/react-jsx-runtime.js"></script>
+<script src="./build/externals/scripts/wp-element.js"></script>
+<script src="./build/react-example.js"></script>
+
 <script src="./build/storepress-utils.js"></script>
-<script src="./build/plugin.js"></script>
+<script src="./build/script-example.js"></script>
+
+<script type="module" src="./build/interactive-example.js"></script>
+
 </body>
-</html>
+</html>

package/plugin-templates/src/interactive/index.js.mustache

@@ -0,0 +1,19 @@
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store('my-app', {
+	state: {
+		count: 0,
+		get toggleText() {
+			const ctx = getContext();
+			return ctx.isOpen ? 'Hide' : 'Show';
+		},
+	},
+	actions: {
+		increment() { state.count++; },
+		decrement() { state.count--; },
+		toggle() {
+			const ctx = getContext();
+			ctx.isOpen = !ctx.isOpen;
+		},
+	},
+});

package/plugin-templates/src/react/index.js.mustache

@@ -0,0 +1,38 @@
+import { createRoot, useState, StrictMode } from '@wordpress/element';
+
+const App = () => {
+	const [count, setCount]         = useState(0);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const toggleVisible = () => setIsVisible(!isVisible);
+
+	const toggleText = isVisible ? 'Hide' : 'Show';
+
+	const toggleStyle = {
+		display : isVisible ? 'block' : 'none'
+	}
+
+	return (
+		<div>
+			<h2>React Counter: {count}</h2>
+
+			<button onClick={() => setCount(count + 1)}>+</button>
+
+			<button onClick={() => setCount(count - 1)}>-</button>
+
+			<hr/>
+
+			<button onClick={toggleVisible}> {toggleText} </button>
+
+			<p style={toggleStyle}>
+				Hello from the React API! 🎉
+			</p>
+		</div>
+	);
+};
+
+const container = document.getElementById('wrapper');
+if (container) {
+	const root = createRoot(container);
+	root.render(<StrictMode><App/></StrictMode>);
+}

package/{block-templates → plugin-templates/src/storepress}/Plugin.js.mustache

@@ -10,7 +10,7 @@ export function Plugin (element, options) {
   const PRIVATE = {}
 
   // Collecting settings from html attribute
-  const ATTRIBUTE = 'plugin-settings' // html data-plugin-settings
+  const ATTRIBUTE = 'storepress-plugin' // html data-plugin-settings
 
   const CLASSES = {
     NEW: 'new-class',
@@ -86,4 +86,4 @@ export function Plugin (element, options) {
   }
 
   return init()
-}
+}

package/plugin-templates/src/storepress/index.js.mustache

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { createStorePressPlugin } from '@storepress/utils';
+
+/**
+ * Internal dependencies
+ */
+import { Plugin } from './Plugin';
+
+const HtmlPlugin = createStorePressPlugin({
+	selector  : '[data-storepress-plugin]',
+	options   : {},
+	plugin    : Plugin,
+	namespace : 'html',
+});
+
+HtmlPlugin.setup();
+
+export default HtmlPlugin;

package/plugin-templates/src/storepress/script.js.mustache

@@ -0,0 +1,9 @@
+/**
+ * External dependencies
+ */
+
+import HtmlPlugin from '@storepress/html-plugin';
+
+document.addEventListener('DOMContentLoaded', () => {
+	HtmlPlugin.init();
+});

package/{block-templates → plugin-templates/src/storepress}/style.scss.mustache

@@ -4,7 +4,7 @@
 
 $default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
-:where([data-{{kebabSlug}}]) {
+:where([data-storepress-plugin]) {
   font-family: $default-font;
 
   @include plugin.init();
@@ -12,4 +12,4 @@ $default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-San
   & {
     --custom-variable: 1px;
   }
-}
+}