From fa83d3339375b0cfd8d4f0e64a90da9b8b059db1 Mon Sep 17 00:00:00 2001 From: Vitalij Mik Date: Wed, 22 May 2024 16:19:06 +0200 Subject: [PATCH] NTR: restore plugin class --- .../app/storefront/build/webpack.config.js | 13 ++ .../storefront/src/mollie-payments/Plugin.js | 4 +- .../shopware-storefront-sdk/README.md | 17 +++ .../helper/DeviceDetection.d.ts | 1 + .../helper/DeviceDetection.js | 7 + .../helper/String.d.ts | 4 + .../shopware-storefront-sdk/helper/String.js | 24 ++++ .../shopware-storefront-sdk/package.json | 25 ++++ .../plugin-system/NativeEventEmitter.d.ts | 22 ++++ .../plugin-system/NativeEventEmitter.js | 86 ++++++++++++ .../plugin-system/plugin.class.d.ts | 16 +++ .../plugin-system/plugin.class.js | 123 ++++++++++++++++++ .../app/storefront/webpack.config.js | 11 +- 13 files changed, 350 insertions(+), 3 deletions(-) create mode 100644 src/Resources/app/storefront/build/webpack.config.js create mode 100644 src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/README.md create mode 100644 src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/DeviceDetection.d.ts create mode 100644 src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/DeviceDetection.js create mode 100644 src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/String.d.ts create mode 100644 src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/String.js create mode 100644 src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/package.json create mode 100644 src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/NativeEventEmitter.d.ts create mode 100644 src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/NativeEventEmitter.js create mode 100644 src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/plugin.class.d.ts create mode 100644 src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/plugin.class.js diff --git a/src/Resources/app/storefront/build/webpack.config.js b/src/Resources/app/storefront/build/webpack.config.js new file mode 100644 index 000000000..950a0d439 --- /dev/null +++ b/src/Resources/app/storefront/build/webpack.config.js @@ -0,0 +1,13 @@ +const {resolve, join} = require("path"); + +module.exports = () => { + return { + resolve: { + alias: { + '@shopware-storefront-sdk': resolve( + join(__dirname, '..', 'src_vendor', 'shopware-storefront-sdk'), + ), + }, + }, + }; +}; \ No newline at end of file diff --git a/src/Resources/app/storefront/src/mollie-payments/Plugin.js b/src/Resources/app/storefront/src/mollie-payments/Plugin.js index 142fd8432..aaa57af29 100644 --- a/src/Resources/app/storefront/src/mollie-payments/Plugin.js +++ b/src/Resources/app/storefront/src/mollie-payments/Plugin.js @@ -1,2 +1,2 @@ - -export default class Plugin extends window.PluginBaseClass{} \ No newline at end of file +import ShopwarePlugin from '@shopware-storefront-sdk/plugin-system/plugin.class'; +export default class Plugin extends ShopwarePlugin{} \ No newline at end of file diff --git a/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/README.md b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/README.md new file mode 100644 index 000000000..22ae1747b --- /dev/null +++ b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/README.md @@ -0,0 +1,17 @@ +# Shopware Storefront SDK + +## Description + +The Shopware Storefront SDK is a set of classes and methods to easily access the Shopware Storefront. +So in your plugins, you can add this package as dependency and use the classes from this package instead of default Shopware files. + +## Features + +- Build Shopware Version independent plugin +- Ability to build your plugin javascript without having the Shopware 6 code-base + +## Installation + +```bash +npm install shopware-storefront-sdk +``` diff --git a/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/DeviceDetection.d.ts b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/DeviceDetection.d.ts new file mode 100644 index 000000000..5e35d30a1 --- /dev/null +++ b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/DeviceDetection.d.ts @@ -0,0 +1 @@ +export declare function isTouchDevice(): boolean; diff --git a/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/DeviceDetection.js b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/DeviceDetection.js new file mode 100644 index 000000000..5e808288e --- /dev/null +++ b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/DeviceDetection.js @@ -0,0 +1,7 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.isTouchDevice = void 0; +function isTouchDevice() { + return ('ontouchstart' in document.documentElement); +} +exports.isTouchDevice = isTouchDevice; diff --git a/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/String.d.ts b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/String.d.ts new file mode 100644 index 000000000..8819ee9df --- /dev/null +++ b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/String.d.ts @@ -0,0 +1,4 @@ +export declare function ucFirst(value: string): string; +export declare function lcFirst(value: string): string; +export declare function toLowerCamelCase(value: string, separator: string): string; +export declare function toUpperCamelCase(value: string, separator: string): string; diff --git a/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/String.js b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/String.js new file mode 100644 index 000000000..5103b7436 --- /dev/null +++ b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/helper/String.js @@ -0,0 +1,24 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.toUpperCamelCase = exports.toLowerCamelCase = exports.lcFirst = exports.ucFirst = void 0; +function ucFirst(value) { + return value.charAt(0).toUpperCase() + value.slice(1); +} +exports.ucFirst = ucFirst; +function lcFirst(value) { + return value.charAt(0).toLowerCase() + value.slice(1); +} +exports.lcFirst = lcFirst; +function toLowerCamelCase(value, separator) { + var upperCamelCase = toUpperCamelCase(value, separator); + return lcFirst(upperCamelCase); +} +exports.toLowerCamelCase = toLowerCamelCase; +function toUpperCamelCase(value, separator) { + if (!separator) { + return ucFirst(value.toLowerCase()); + } + var stringParts = value.split(separator); + return stringParts.map(function (string) { return ucFirst(string.toLowerCase()); }).join(''); +} +exports.toUpperCamelCase = toUpperCamelCase; diff --git a/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/package.json b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/package.json new file mode 100644 index 000000000..badc32db9 --- /dev/null +++ b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/package.json @@ -0,0 +1,25 @@ +{ + "name": "shopware-storefront-sdk", + "version": "0.0.2", + "description": "Provides Shopware Storefront Utilities as Typescript", + "main": "sdk.js", + "types": "sdk.d.ts", + "scripts": { + "publish-to-npm": "rm -rf dist; tsc --build && cp package.json dist && cat ./package.json | grep -v '\\\"private\\\":' > dist/package.json; cp README.md dist" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/FriendsOfShopware/shopware-storefront-sdk.git" + }, + "bugs": { + "url": "https://github.com/FriendsOfShopware/shopware-storefront-sdk/issues" + }, + "author": "FriendsOfShopware", + "license": "MIT", + "dependencies": { + "deepmerge": "^4.2.2" + }, + "devDependencies": { + "typescript": "^4.7.4" + } +} diff --git a/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/NativeEventEmitter.d.ts b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/NativeEventEmitter.d.ts new file mode 100644 index 000000000..083a001e9 --- /dev/null +++ b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/NativeEventEmitter.d.ts @@ -0,0 +1,22 @@ +interface NativeEventEmitterPublish { + detail?: object; + cancelable?: boolean; +} +interface NativeEventEmitterSubscribeOpts { + once?: boolean; + scope?: Function; +} +export default class NativeEventEmitter { + private _listeners; + private _el; + constructor(el: HTMLElement); + publish(eventName: string, detail?: NativeEventEmitterPublish, cancelable?: boolean): CustomEvent; + subscribe(eventName: string, callback: Function, opts?: NativeEventEmitterSubscribeOpts): boolean; + unsubscribe(eventName: String): boolean; + reset(): boolean; + get el(): HTMLElement; + set el(value: HTMLElement); + get listeners(): any[]; + set listeners(value: any[]); +} +export {}; diff --git a/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/NativeEventEmitter.js b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/NativeEventEmitter.js new file mode 100644 index 000000000..9aa92d954 --- /dev/null +++ b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/NativeEventEmitter.js @@ -0,0 +1,86 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var NativeEventEmitter = /** @class */ (function () { + function NativeEventEmitter(el) { + this._el = el; + // @ts-ignore + el.$emitter = this; + this._listeners = []; + } + NativeEventEmitter.prototype.publish = function (eventName, detail, cancelable) { + if (detail === void 0) { detail = {}; } + if (cancelable === void 0) { cancelable = false; } + var event = new CustomEvent(eventName, { + detail: detail, + cancelable: cancelable, + }); + this.el.dispatchEvent(event); + return event; + }; + NativeEventEmitter.prototype.subscribe = function (eventName, callback, opts) { + if (opts === void 0) { opts = {}; } + var emitter = this; + var splitEventName = eventName.split('.'); + var cb = opts.scope ? callback.bind(opts.scope) : callback; + // Support for listeners which are fired once + if (opts.once && opts.once === true) { + var onceCallback_1 = cb; + cb = function onceListener(event) { + emitter.unsubscribe(eventName); + onceCallback_1(event); + }; + } + this.el.addEventListener(splitEventName[0], cb); + this.listeners.push({ + splitEventName: splitEventName, + opts: opts, + cb: cb, + }); + return true; + }; + NativeEventEmitter.prototype.unsubscribe = function (eventName) { + var _this = this; + var splitEventName = eventName.split('.'); + this.listeners = this.listeners.reduce(function (accumulator, listener) { + var foundEvent = listener.splitEventName.sort().toString() === splitEventName.sort().toString(); + if (foundEvent) { + _this.el.removeEventListener(listener.splitEventName[0], listener.cb); + return accumulator; + } + accumulator.push(listener); + return accumulator; + }, []); + return true; + }; + NativeEventEmitter.prototype.reset = function () { + var _this = this; + this.listeners.forEach(function (listener) { + _this.el.removeEventListener(listener.splitEventName[0], listener.cb); + }); + // Reset registry + this.listeners = []; + return true; + }; + Object.defineProperty(NativeEventEmitter.prototype, "el", { + get: function () { + return this._el; + }, + set: function (value) { + this._el = value; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(NativeEventEmitter.prototype, "listeners", { + get: function () { + return this._listeners; + }, + set: function (value) { + this._listeners = value; + }, + enumerable: false, + configurable: true + }); + return NativeEventEmitter; +}()); +exports.default = NativeEventEmitter; diff --git a/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/plugin.class.d.ts b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/plugin.class.d.ts new file mode 100644 index 000000000..2f3f09c02 --- /dev/null +++ b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/plugin.class.d.ts @@ -0,0 +1,16 @@ +export default abstract class PluginClass { + private readonly el; + private $emitter; + private readonly _pluginName; + private readonly options; + private _initialized; + constructor(el: HTMLElement, options?: any, pluginName?: boolean | string); + private _init; + _update(): void; + abstract init(): void; + update(): void; + _registerInstance(): void; + private _getPluginName; + private _mergeOptions; + private parseJsonOrFail; +} diff --git a/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/plugin.class.js b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/plugin.class.js new file mode 100644 index 000000000..d3728aac0 --- /dev/null +++ b/src/Resources/app/storefront/src_vendor/shopware-storefront-sdk/plugin-system/plugin.class.js @@ -0,0 +1,123 @@ +"use strict"; + +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : {"default": mod}; +}; + +Object.defineProperty(exports, "__esModule", {value: true}); + +var NativeEventEmitter_1 = __importDefault(require("./NativeEventEmitter")); + +var deepmerge_1 = __importDefault(require("deepmerge")); + +var PluginClass = /** @class */ (function () { + + function PluginClass(el, options, pluginName) { + + if (options === void 0) { + options = {}; + } + if (pluginName === void 0) { + pluginName = false; + } + this.el = el; + this.$emitter = new NativeEventEmitter_1.default(this.el); + this._pluginName = this._getPluginName(pluginName); + this.options = this._mergeOptions(options); + this._initialized = false; + this._registerInstance(); + this._init(); + } + + PluginClass.prototype._init = function () { + if (this._initialized) + return; + this.init(); + this._initialized = true; + }; + + PluginClass.prototype._update = function () { + if (!this._initialized) + return; + this.update(); + }; + + PluginClass.prototype.update = function () { + }; + + PluginClass.prototype._registerInstance = function () { + var elementPluginInstances = window.PluginManager.getPluginInstancesFromElement(this.el); + elementPluginInstances.set(this._pluginName, this); + var plugin = window.PluginManager.getPlugin(this._pluginName, false); + plugin.get('instances').push(this); + }; + + PluginClass.prototype._getPluginName = function (pluginName) { + if (pluginName === false) { + // @ts-ignore + return this.constructor.name; + } + return pluginName; + }; + + PluginClass.prototype._mergeOptions = function (options) { + var dashedPluginName = this._pluginName.replace(/([A-Z])/g, '-$1').replace(/^-/, '').toLowerCase(); + var dataAttributeConfig = this.parseJsonOrFail(dashedPluginName); + + let dataAttributeOptions = ''; + + if (typeof this.el.getAttribute === 'function') { + dataAttributeOptions = this.el.getAttribute("data-".concat(dashedPluginName, "-options")) || ''; + } + + // static plugin options + // previously merged options + // explicit options when creating a plugin instance with 'new' + var merge = [ + // @ts-ignore + this.constructor.options, + this.options, + options, + ]; + + // options which are set via data-plugin-name-config="config name" + if (dataAttributeConfig) { + merge.push(window.PluginConfigManager.get(this._pluginName, dataAttributeConfig)); + } + + // options which are set via data-plugin-name-options="{json..}" + try { + if (dataAttributeOptions) + merge.push(JSON.parse(dataAttributeOptions)); + } catch (e) { + throw new Error("The data attribute \"data-".concat(dashedPluginName, "-options\" could not be parsed to json: ").concat(e.message || '')); + } + + return deepmerge_1.default.all(merge.filter(function (config) { + return config instanceof Object && !(config instanceof Array); + }) + .map(function (config) { + return config || {}; + })); + }; + + PluginClass.prototype.parseJsonOrFail = function (dashedPluginName) { + + if (typeof this.el.getAttribute !== 'function') { + return ''; + } + + const value = this.el.getAttribute("data-".concat(dashedPluginName, "-config")) || ''; + + try { + return JSON.parse(value); + } catch (e) { + return value; + } + }; + + return PluginClass; + +}()); + +exports.default = PluginClass; diff --git a/src/Resources/app/storefront/webpack.config.js b/src/Resources/app/storefront/webpack.config.js index bbaaa627d..d5c692a76 100644 --- a/src/Resources/app/storefront/webpack.config.js +++ b/src/Resources/app/storefront/webpack.config.js @@ -1,4 +1,5 @@ const path = require('path') +const {resolve, join} = require("path"); module.exports = { mode: 'production', @@ -7,4 +8,12 @@ module.exports = { path: path.resolve(__dirname, '..', '..', 'public'), filename: 'mollie-payments.js', }, -} + resolve: { + extensions: ['.js'], + alias: { + '@shopware-storefront-sdk': resolve( + join(__dirname, 'src_vendor', 'shopware-storefront-sdk'), + ), + }, + }, +} \ No newline at end of file