@storepress/create-plugin-html 0.0.6 → 0.1.1

package/README.md

@@ -7,16 +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 -y @wordpress/create-block@latest --template @storepress/create-plugin-html --no-wp-scripts my-html-extension-name && cd "$_"
+npx -y @wordpress/create-block@latest --template @storepress/create-plugin-html my-html-extension-name && cd "$_"
 ```
 
 Navigate to the newly created folder and get started.
 
 ```
-npm i                        # Install dependencies
-npm run packages-update      # Update package dependency
-npm run build                # Build the javascript
-npx -y http-server           # Start Server
+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
@@ -24,7 +23,7 @@ npx -y http-server           # Start Server
 For development on this tool itself, you can also install from a local directory.
 
 ```bash
-npx -y @wordpress/create-block@latest --template ./path/to/storepress/create-plugin-html --no-wp-scripts my-html-extension-name && cd "$_"
+npx -y @wordpress/create-block@latest --template ./create-plugin-html my-html-extension-name && cd "$_"
 ```
 
 ### Add Tests

package/index.js

@@ -3,27 +3,87 @@
  */
 const {join} = require('path')
 
-// two-words
+/**
+ * Converts a string to kebab-case by replacing separators (hyphens, dots,
+ * underscores, spaces, and plus signs) with hyphens and lowercasing.
+ *
+ * @param {string} input - The string to convert.
+ * @returns {string} The kebab-cased string (e.g. "my-plugin-name").
+ *
+ * @example
+ * kebabCase('My Plugin Name') // => 'my-plugin-name'
+ * kebabCase('my_plugin.name') // => 'my-plugin-name'
+ */
 function kebabCase(input) {
     const regex = /[-._\s+]/gi
     return input.replace(regex, '-').toLowerCase()
 }
 
+/**
+ * Converts a string to snake_case by replacing separators (hyphens, dots,
+ * underscores, spaces, and plus signs) with underscores and lowercasing.
+ *
+ * @param {string} input - The string to convert.
+ * @returns {string} The snake_cased string (e.g. "my_plugin_name").
+ *
+ * @example
+ * snakeCase('My Plugin Name') // => 'my_plugin_name'
+ * snakeCase('my-plugin.name') // => 'my_plugin_name'
+ */
+function snakeCase(input) {
+    const regex = /[-._\s+]/gi
+    return input.replace(regex, '_').toLowerCase()
+}
+
+/**
+ * Converts a string to CONSTANT_CASE by replacing separators (hyphens, dots,
+ * underscores, spaces, and plus signs) with underscores and uppercasing.
+ *
+ * @param {string} input - The string to convert.
+ * @returns {string} The constant-cased string (e.g. "MY_PLUGIN_NAME").
+ *
+ * @example
+ * constantCase('my-plugin-name') // => 'MY_PLUGIN_NAME'
+ * constantCase('my plugin.name') // => 'MY_PLUGIN_NAME'
+ */
 function constantCase(input) {
     const regex = /[-._\s+]/gi
     return input.replace(regex, '_').toUpperCase()
 }
 
+/**
+ * Maps the literal string `"storepress"` to its branded casing `"StorePress"`,
+ * leaving all other inputs unchanged.
+ *
+ * @param {string} input - The string to check.
+ * @returns {string} `"StorePress"` if input is `"storepress"`, otherwise the original input.
+ *
+ * @example
+ * pascalStorePress('storepress') // => 'StorePress'
+ * pascalStorePress('myplugin')   // => 'myplugin'
+ */
 function pascalStorePress(input) {
     return 'storepress' === input ? 'StorePress' : input
 }
 
+/**
+ * Converts a string to PascalCase by extracting alphanumeric words and
+ * capitalizing the first letter of each.
+ *
+ * @param {string} input - The string to convert.
+ * @returns {string} The PascalCased string (e.g. "MyPluginName").
+ *
+ * @example
+ * pascalCase('my-plugin-name') // => 'MyPluginName'
+ * pascalCase('my plugin name') // => 'MyPluginName'
+ */
 function pascalCase(input) {
     return (input.match(/[a-zA-Z0-9]+/g) || []).map(w => `${w.charAt(0).toUpperCase()}${w.slice(1)}`).join('')
 }
 
 module.exports = {
     defaultValues       : {
+        wpScripts          : false,
         folderName         : 'src',
         namespace          : 'storepress',
         slug               : 'plugin',
@@ -36,10 +96,10 @@ module.exports = {
         attributes         : {},
         license            : 'GPL-2.0-or-later',
         customScripts      : {
-            'postinstall' : 'git init -q && rimraf .husky && npx husky init && echo "npx lint-staged" > .husky/pre-commit',
+            'postinstall' : 'npm run packages-install:all && 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',
+            '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',
@@ -73,24 +133,29 @@ module.exports = {
             'test:e2e'  : 'wp-scripts test-e2e',
             'test:unit' : 'wp-scripts test-unit-js',
 
-            'start' : 'rimraf build && wp-scripts start --webpack-copy-php --experimental-modules',
+            "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/dependency-extraction-webpack-plugin',
+            '@wordpress/eslint-plugin',
             '@wordpress/base-styles',
             '@wordpress/dependency-extraction-webpack-plugin',
-            'eslint-plugin-you-dont-need-lodash-underscore',
             'husky',
             'lint-staged',
-            "prettier@npm:wp-prettier",
+            "prettier",
             'fs-extra',
             'webpack-remove-empty-scripts',
-            'eslint-plugin-prettier@5.2.1',
+            'eslint-plugin-prettier',
             'eslint-formatter-pretty',
             'rimraf',
         ],
@@ -109,7 +174,7 @@ module.exports = {
             'zip'           : [
                 'build/**',
                 'index.html',
-                'global-style.css',
+                'index-module.html',
             ],
         },
         transformer        : (view) => {
@@ -120,6 +185,8 @@ module.exports = {
             const constantSlug      = constantCase(view.slug) // TWO_WORDS
             const kebabSlug         = kebabCase(view.slug) // two-words
             const pascaleSlug       = pascalCase(pascalStorePress(view.slug)) // 'TwoWords'
+            const snakeNamespace    = snakeCase(view.namespace)
+            const snakeSlug         = snakeCase(view.slug)
             return {
                 ...view,
                 name              : `@${kebabNamespace}/${kebabSlug}`,
@@ -127,10 +194,12 @@ module.exports = {
                 constantNamespace : constantNamespace,
                 kebabNamespace    : kebabNamespace,
                 pascaleNamespace  : pascaleNamespace,
+                snakeNamespace    : snakeNamespace,
 
                 constantSlug : constantSlug,
                 kebabSlug    : kebabSlug,
                 pascaleSlug  : pascaleSlug,
+                snakeSlug    : snakeSlug,
 
                 GITHUB_REPOSITORY_NAME   : '${{ github.event.repository.name }}',
                 GITHUB_RELEASE_NAME      : '${{ env.RELEASE_NAME }}',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@storepress/create-plugin-html",
-	"version": "0.0.6",
+	"version": "0.1.1",
 	"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/.github/workflows/deploy-github-pages.yaml.mustache

@@ -47,6 +47,7 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           path: '.'
+
       - name: "Deploy to GitHub Pages"
         id: deployment
         uses: actions/deploy-pages@v4

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

@@ -0,0 +1,133 @@
+/**
+ * WordPress dependencies
+ */
+const wordpress = require('@wordpress/eslint-plugin');
+
+/**
+ * Internal dependencies
+ */
+const { getWebPackAlias } = require('./tools/webpack-helpers');
+const aliases = Object.keys(getWebPackAlias());
+
+// All @wordpress/* packages that get externalized to wp.* globals at build time.
+// These don't need to be in package.json — WordPress provides them at runtime.
+// https://developer.wordpress.org/block-editor/reference-guides/packages/packages-eslint-plugin/
+const wordPressPackages = [
+	'@wordpress/a11y',
+	'@wordpress/annotations',
+	'@wordpress/api-fetch',
+	'@wordpress/autop',
+	'@wordpress/blob',
+	'@wordpress/block-directory',
+	'@wordpress/block-editor',
+	'@wordpress/block-library',
+	'@wordpress/block-serialization-default-parser',
+	'@wordpress/blocks',
+	'@wordpress/commands',
+	'@wordpress/components',
+	'@wordpress/compose',
+	'@wordpress/core-commands',
+	'@wordpress/core-data',
+	'@wordpress/customize-widgets',
+	'@wordpress/data',
+	'@wordpress/data-controls',
+	'@wordpress/date',
+	'@wordpress/deprecated',
+	'@wordpress/dom',
+	'@wordpress/dom-ready',
+	'@wordpress/edit-post',
+	'@wordpress/edit-site',
+	'@wordpress/edit-widgets',
+	'@wordpress/editor',
+	'@wordpress/element',
+	'@wordpress/escape-html',
+	'@wordpress/format-library',
+	'@wordpress/hooks',
+	'@wordpress/html-entities',
+	'@wordpress/i18n',
+	'@wordpress/icons',
+	'@wordpress/interactivity',
+	'@wordpress/interactivity-router',
+	'@wordpress/interface',
+	'@wordpress/is-shallow-equal',
+	'@wordpress/keyboard-shortcuts',
+	'@wordpress/keycodes',
+	'@wordpress/list-reusable-blocks',
+	'@wordpress/media-utils',
+	'@wordpress/notices',
+	'@wordpress/nux',
+	'@wordpress/patterns',
+	'@wordpress/plugins',
+	'@wordpress/preferences',
+	'@wordpress/preferences-persistence',
+	'@wordpress/primitives',
+	'@wordpress/priority-queue',
+	'@wordpress/private-apis',
+	'@wordpress/redux-routine',
+	'@wordpress/reusable-blocks',
+	'@wordpress/rich-text',
+	'@wordpress/router',
+	'@wordpress/server-side-render',
+	'@wordpress/shortcode',
+	'@wordpress/style-engine',
+	'@wordpress/token-list',
+	'@wordpress/url',
+	'@wordpress/viewport',
+	'@wordpress/warning',
+	'@wordpress/widgets',
+	'@wordpress/wordcount',
+	'@storepress/html-plugin',
+	'adm-zip',
+	'fast-glob',
+];
+
+const restrictedImports = [
+	{
+		name: 'lodash',
+		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`.",
+	},
+	{
+		name: 'redux',
+		importNames: ['combineReducers'],
+		message: 'Please use `combineReducers` from `@wordpress/data` instead.',
+	},
+];
+
+module.exports = [
+	{
+		ignores: ['build/', 'vendor/', 'node_modules/'],
+	},
+	...wordpress.configs.recommended,
+	{
+		languageOptions: {
+			globals: {
+				StorePress: 'writable',
+			},
+		},
+		settings: {
+			'import/core-modules': [...wordPressPackages, ...aliases],
+			'import/resolver': {
+				node: {
+					extensions: ['.js', '.jsx', '.ts', '.tsx'],
+				},
+			},
+		},
+		rules: {
+			'@wordpress/dependency-group': 'warn',
+			'no-unused-vars': 'warn',
+			'@wordpress/no-unsafe-wp-apis': 'warn',
+			'no-restricted-imports': [
+				'error',
+				{
+					paths: restrictedImports,
+				},
+			],
+		},
+	},
+];

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,35 +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" />
-
-    <script type="importmap">
-        {
-          "imports":
-              {
-                  "@storepress/utils":"./build/storepress-utils-module.js"
-                  "@huggingface/transformers":"https://esm.sh/@huggingface/transformers"
-                  "@babycommando/entity-db":"https://esm.sh/@babycommando/entity-db"
-              }
-        }
-    </script>
-
-    <link rel="modulepreload" href="./build/storepress-utils-module.js" />
-    <link rel="modulepreload" href="https://esm.sh/@huggingface/transformers" />
-    <link rel="modulepreload" href="https://esm.sh/@babycommando/entity-db" />
-
-    <script type="module" src="./custom-module.js"></script>
+	<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="{{slug}}"
+	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,22 @@
+/**
+* WordPress dependencies
+*/
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store('{{slug}}', {
+	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,41 @@
+/**
+* WordPress dependencies
+*/
+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;
   }
-}
+}