@storepress/create-plugin-html 0.0.1 → 0.0.2

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',
@@ -127,6 +127,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 +137,7 @@ module.exports = {
 
         constantSlug: constantSlug,
         kebabSlug: kebabSlug,
+        pascaleSlug: pascaleSlug,
       }
     },
   },

package/package.json

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