@storepress/create-plugin-html 0.0.1 → 0.0.3

package/block-templates/Plugin.js.mustache

@@ -10,24 +10,10 @@ export function Plugin (element, options) {
   const PRIVATE = {}
 
   // Collecting settings from html attribute
-  const ATTRIBUTE = 'plugin-settings' //
+  const ATTRIBUTE = 'plugin-settings' // html data-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 CLASSES = {
+    NEW: 'new-class',
   }
 
   const noop = () => () => {}
@@ -41,27 +27,31 @@ export function Plugin (element, options) {
   }
 
   const initial = () => {
-	console.log(this.settings)
+    console.log(this.settings)
     triggerEvent(this.$element, 'afterInit', {})
   }
 
-  const cssVariableIsTrue = (string) => {
-    return string === 'true' || string === '1' || string === 'yes'
-  }
   const addClasses = () => {
-
+    this.$element.classList.add(CLASSES.NEW)
   }
 
-  const removeClasses = () => {
+  const addEvents = () => {
 
-  }
+    this.$element.addEventListener('click', (e) => {
 
-  const addEvents = () => {
+      console.log(e.target.getAttribute('class'))
+
+    }, { signal: this.signal, passive: true })
 
   }
 
   const removeEvents = () => {
 
+    this.controller.abort('Reset')
+  }
+
+  const removeClasses = () => {
+    this.$element.classList.remove(CLASSES.NEW)
   }
 
   const reset = () => {
@@ -69,10 +59,29 @@ export function Plugin (element, options) {
     removeEvents()
   }
 
-  // Expose to public.
+  // Expose reset to public.
   const expose = () => ({
-    removeEvents, reset,
+    reset,
   })
 
+// Do what you need and return expose fn.
+  const init = () => {
+    this.$element = element
+    this.settings = {
+      ...DEFAULTS, ...options, ...getOptionsFromAttribute(this.$element, ATTRIBUTE), ...PRIVATE,
+    }
+
+    this.controller = new AbortController()
+    this.signal = this.controller.signal
+
+    initial()
+
+    addClasses()
+
+    addEvents()
+
+    return expose()
+  }
+
   return init()
 }

package/block-templates/index.js.mustache

@@ -1,64 +1,89 @@
 /**
  * External dependencies
  */
-import { createPluginInstance, triggerEvent } from '@storepress/utils'
+import { createPluginInstance, triggerEvent, getPluginInstance } from '@storepress/utils'
 
 /**
  * Internal dependencies
  */
-import { Plugin } from './Plugin'
+import { Plugin as Instance } from './Plugin'
 
-export default function StorePressPlugin () {
-  const StorePressPlugin = {
-    getInstance (element) {
-      return createPluginInstance(element, false, Plugin)
+export default function {{pascaleSlug}}Plugin () {
+  const Plugin = {
+    createInstance (element, options) {
+      return createPluginInstance(element, options, Instance)
     },
 
-    initWith ($selector = '[data-plugin-settings]') {
-      for (const { element, unregister } of this.getInstance($selector)) {
-        element.addEventListener('destroy', unregister)
-      }
+    getInstance (element) {
+      return getPluginInstance(element)
     },
 
-    init () {
-      for (const { element, unregister } of this.getInstance('[data-plugin-settings]')) {
-        element.addEventListener('destroy', unregister)
+    init ($selector, options) {
+      for (const { element, reset } of this.createInstance($selector, options)) {
+        element.addEventListener('destroy', reset)
       }
     },
 
-    destroy () {
-      for (const { destroy } of this.getInstance('[data-plugin-settings]')) {
+    destroy ($selector) {
+      for (const { destroy } of this.getInstance($selector)) {
         destroy()
       }
     },
 
-    destroyWith ($selector = '[data-plugin-settings]') {
-      for (const { destroy } of this.getInstance($selector)) {
-        destroy()
-      }
+    reload ($selector, options) {
+      this.destroy($selector)
+      this.init($selector, options)
     },
   }
 
-  document.addEventListener('storepress_plugin_init', () => {
-    StorePressPlugin.init()
-  })
+  document.addEventListener('storepress_plugin_init', (event) => {
 
-  document.addEventListener('storepress_plugin_destroy', () => {
-    StorePressPlugin.destroy()
-  })
+    const defaultSettings = {}
+    const settings = { ...defaultSettings, ...event.detail?.settings }
+    const element = event.detail?.element
 
-  document.addEventListener('storepress_plugin_init_with', (event) => {
-    const selector = event.detail?.element
-    StorePressPlugin.initWith(selector)
-  })
+    if (Array.isArray(element)) {
+      for (const el of element) {
+        Plugin.init(el, settings)
+      }
+    } else {
+      Plugin.init(element, settings)
+    }
+  }, { passive: true })
 
-  document.addEventListener('storepress_plugin_destroy_with', (event) => {
-    const selector = event.detail?.element
-    StorePressPlugin.destroyWith(selector)
-  })
+  document.addEventListener('storepress_plugin_destroy', (event) => {
+
+    const element = event.detail?.element
+
+    if (Array.isArray(element)) {
+      for (const el of element) {
+        Plugin.destroy(el)
+      }
+    } else {
+      Plugin.destroy(element)
+    }
+
+  }, { passive: true })
+
+  document.addEventListener('storepress_plugin_reload', (event) => {
+    const defaultSettings = {}
+    const settings = { ...defaultSettings, ...event.detail?.settings }
+    const element = event.detail?.element
+
+    if (Array.isArray(element)) {
+      for (const el of element) {
+        Plugin.reload(el, settings)
+      }
+    } else {
+      Plugin.reload(element, settings)
+    }
+  }, { passive: true })
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  StorePressPlugin()
-  triggerEvent(document, 'storepress_plugin_init')
+  {{pascaleSlug}}Plugin()
+  triggerEvent(document, 'storepress_plugin_init', {
+    element: ['[data-plugin-settings]'],
+    settings: {},
+  })
 })

package/index.js

@@ -27,7 +27,7 @@ module.exports = {
     folderName: 'src',
     namespace: 'storepress',
     slug: 'plugin',
-    version: '0.1.0',
+    version: '0.0.1',
     title: 'StorePress Plugin',
     description: 'A StorePress Plugin',
     author: 'EmranAhmed',
@@ -84,6 +84,7 @@ module.exports = {
       'eslint-plugin-you-dont-need-lodash-underscore',
       'husky',
       'lint-staged',
+      "prettier@npm:wp-prettier@latest",
       'fs-extra',
       'webpack-remove-empty-scripts',
       'eslint-plugin-prettier',
@@ -96,20 +97,6 @@ module.exports = {
       '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': [
@@ -127,6 +114,7 @@ module.exports = {
       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,
         todayDate: todayDate,
@@ -136,6 +124,12 @@ module.exports = {
 
         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 }}',
       }
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@storepress/create-plugin-html",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"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

@@ -26,27 +26,27 @@ jobs:
   deploy:
     environment:
       name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+      url: {{ GITHUB_PAGE_URL }}
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - name: "Checkout"
         uses: actions/checkout@v4
-      # Set up Node
-      - name: Setup Node
+
+      - name: "Setup Node"
         uses: actions/setup-node@v4
         with:
-          node-version: 18
-      - name: Install and Build
+          node-version: '20.x'
+
+      - name: "Install and Build"
         run: |
           npm install
           npm run build
-      #- name: Setup Pages
-      #  uses: actions/configure-pages@v5
-      - name: Upload artifact
+          rm -rf node_modules
+
+      - name: "Upload Page Contents"
         uses: actions/upload-pages-artifact@v3
         with:
-          # Upload entire repository
           path: '.'
-      - name: Deploy to GitHub Pages
+      - name: "Deploy to GitHub Pages"
         id: deployment
         uses: actions/deploy-pages@v4

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

@@ -10,23 +10,22 @@ on:
 permissions: write-all
 
 env:
-  REPOSITORY_NAME: ${{ github.event.repository.name }}
+  REPOSITORY_NAME: {{ GITHUB_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.
-
+  # - Checks out the repository
+  # - Setup and Install Node.js
+  # - NPM Install
+  # - Make Zip
+  # - Get Release Version
+  # - Get Release Filename
+  # - Make Release
 
   build:
     name: Release
@@ -39,24 +38,26 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20.x'
-      - run: npm clean-install
+
+      - name: "NPM Install"
+        run: npm install
 
       - name: "Make Zip"
         run: npm run plugin-zip --if-present
 
-      - name: "Get release version."
+      - name: "Get Release Version"
         run: |
           echo "RELEASE_TAG=$(node -p -e "require('./package.json').version")" >> $GITHUB_ENV
 
-      - name: "Get release file base name."
+      - name: "Get Release Filename"
         run: |
           echo "RELEASE_NAME=$(node -p -e "require('./package.json').name")" >> $GITHUB_ENV
 
-      - name: "Upload Release"
+      - name: "Make Release"
         uses: softprops/action-gh-release@v2
         with:
-          files: ./${{ env.RELEASE_NAME }}.zip
+          files: ./{{ GITHUB_RELEASE_NAME }}.zip
           make_latest: true
-          name: Release - v${{ env.RELEASE_TAG }}
+          name: Release - v{{ GITHUB_RELEASE_TAG }}
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: {{ GITHUB_TOKEN }}

package/plugin-templates/.npmrc.mustache

@@ -1 +1 @@
-
+package-lock=false

package/plugin-templates/lint-staged.config.js.mustache

@@ -0,0 +1,6 @@
+module.exports = {
+	'./package.json': ['npm run lint:pkg-json'],
+	'./*.md': ['npm run lint:md:docs'],
+	'./src/**/*.scss': ['npm run lint:css'],
+	'./src/**/*.{js,ts,tsx}': ['npm run lint:js'],
+};