Initial checkin

Initial check in for webcomponent-redux

Author: Sheeshpaul Kamboj

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist

.npmrc

@@ -0,0 +1 @@
+registry = "https://registry.npmjs.com/"

LICENSE

@@ -0,0 +1,37 @@
+{
+  "name": "webcomponent-redux",
+  "version": "0.0.1",
+  "description": "Redux binding for web component",
+  "main": "dist/index.node.js",
+  "module": "dist/index.js",
+  "browser": "dist/webcomponent-redux.min.js",
+  "unpkg": "dist/webcomponent-redux.min.js",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/sheeshpaul/webcomponent-redux.git"
+  },
+  "author": "Sheeshpaul Kamboj <[email protected]>",
+  "license": "MIT",
+  "sideEffects": false,
+  "dependencies": {
+  },
+  "devDependencies": {
+    "rollup": "^1.30.1",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-typescript": "^1.0.1",
+    "rollup-plugin-uglify-es": "0.0.1",
+    "tslib": "^1.10.0",
+    "typescript": "^3.7.5"
+  },
+  "scripts": {
+    "prepare": "rollup -c --environment NODE_ENV:production",
+    "build": "rollup -c",
+    "build-prod": "rollup -c --environment NODE_ENV:production",
+    "watch": "rollup -c -w"
+  },
+  "files": [
+    "dist"
+  ]
+}

package.json

@@ -0,0 +1,46 @@
+import commonjs from "rollup-plugin-commonjs";
+import pkg from './package.json';
+import replace from "rollup-plugin-replace";
+import resolve from "rollup-plugin-node-resolve";
+import typescript from "rollup-plugin-typescript";
+import uglify from "rollup-plugin-uglify-es";
+
+const production = "production";
+
+const development = "development";
+
+const plugins = [
+	resolve(),    // Locate modules using the Node resolution algorithm, for using third party modules in node_modules
+	commonjs(),   // Convert CommonJS modules to ES6, so they can be included in a Rollup bundle
+	typescript(), // Convert TypeScript to JavaScript
+	replace({
+		exclude: "node_modules/**", ENV: JSON.stringify(process.env.NODE_ENV || development),
+	}),
+	(process.env.NODE_ENV === production && uglify())
+];
+
+export default [
+	// Browser bundle
+	{
+		input: "src/main.ts",
+		output: {
+			name: "WebComponentRedux",
+			format: "iife",
+			esModule: false,
+			file: process.env.NODE_ENV === production ? pkg.browser : "dist/webcomponent-redux.js"
+		},
+		plugins: plugins
+	},
+
+	// CommonJS (for Node) and ES module (for bundlers) build
+	{
+		input: "src/main.ts",
+		plugins: [
+			typescript() // Convert TypeScript to JavaScript
+		],
+		output: [
+			{ file: pkg.main, format: "cjs" },
+			{ file: pkg.module, format: "esm" }
+		]
+	}
+];

rollup.config.js

@@ -0,0 +1,22 @@
+import { mixinConnectedCallback } from "./mixin-connectedcallback";
+import { mixinDisconnectedCallback } from "./mixin-disconnectedcallback";
+import { mixinWebcomponent } from "./mixin-webcomponent";
+
+/**
+ * Add Redux state management functionality to class prototype.
+ * @param className - The class
+ * @param mixinStore - The store object
+ */
+export function connect(className: any, mixinStore: any) {
+    Object.assign(className.prototype, mixinWebcomponent);
+
+    if (!className.prototype.hasOwnProperty("connectedCallback")) {
+        Object.assign(className.prototype, mixinConnectedCallback);
+    }
+
+    if (!className.prototype.hasOwnProperty("disconnectedCallback")) {
+        Object.assign(className.prototype, mixinDisconnectedCallback);
+    }
+
+    className.prototype.mixinStore = mixinStore;
+}

src/connect.ts

@@ -0,0 +1 @@
+export * from "./connect";

src/main.ts

@@ -0,0 +1,22 @@
+/**
+ * Interface for MixinConnectedCallback.
+ */
+interface MixinConnectedCallback {
+    connectedCallback: any;
+}
+
+/**
+ * The mixin for generic connectedCallback implementation.
+ */
+export const mixinConnectedCallback: MixinConnectedCallback = {
+    connectedCallback() {
+        // Issue is super is not present here
+        // Walking the prototype chain to call the connectedCallback on parent (super)
+
+        //@ts-ignore
+        this.__proto__.__proto__.connectedCallback.call(this);
+
+        //@ts-ignore
+        this.connectState();
+    }
+};

src/mixin-connectedcallback.ts

@@ -0,0 +1,22 @@
+/**
+ * Interface for MixinDisconnectedCallback.
+ */
+interface MixinDisconnectedCallback {
+    disconnectedCallback: any;
+}
+
+/**
+ * The mixin for generic disconnectedCallback implementation.
+ */
+export const mixinDisconnectedCallback: MixinDisconnectedCallback = {
+    disconnectedCallback() {
+        // Issue is super is not present here
+        // Walking the prototype chain to call the connectedCallback on parent (super)
+
+        //@ts-ignore
+        this.__proto__.__proto__.disconnectedCallback.call(this);
+
+        //@ts-ignore
+        this.disconnectState();
+    }
+};

src/mixin-disconnectedcallback.ts

@@ -0,0 +1,69 @@
+/**
+ * Interface for MixinWebComponent.
+ */
+interface MixinWebComponent {
+    mixinStore: any;
+    mixinState: any;
+    mixinUnsubscribeStore: any;
+    connectState: any;
+    disconnectState: any;
+    onMixinStateChange: any;
+    mapDispatchToProps?: any;
+    mapStateToProps?: any;
+}
+
+/**
+ * The mixin for generic state management functionality.
+ */
+export const mixinWebcomponent: MixinWebComponent = {
+    mixinStore: null,
+
+    mixinState: undefined,
+
+    mixinUnsubscribeStore: null,
+
+    connectState() {
+        // Step 1: To the instance add dispatch functions as properties
+        if (this.mapDispatchToProps) {
+            let obj = this.mapDispatchToProps(this.mixinStore.dispatch);
+
+            if (obj) {
+                for (let key in obj) {
+                    //@ts-ignore
+                    this[key] = obj[key];
+                }
+            }
+        }
+
+        // Step 2: Get the current state and trigger initial mapStateToAttributes
+        let nextState = this.mixinStore.getState();
+
+        this.mapStateToProps && this.mapStateToProps(this.mixinState, nextState);
+
+        // Step 3: Save the current state and subscribe to store change event
+        this.mixinState = nextState;
+
+        this.onMixinStateChange = this.onMixinStateChange.bind(this);
+
+        this.mixinUnsubscribeStore = this.mixinStore.subscribe(this.onMixinStateChange);
+    },
+
+    disconnectState() {
+        if (this.mixinUnsubscribeStore) {
+            this.mixinUnsubscribeStore();
+            this.mixinUnsubscribeStore = null;
+        }
+    },
+
+    onMixinStateChange() {
+        let nextState = this.mixinStore.getState();
+
+        if (nextState === this.mixinState) {
+            return;
+        }
+
+        this.mapStateToProps && this.mapStateToProps(this.mixinState, nextState);
+
+        this.mixinState = nextState;
+    }
+}

src/mixin-webcomponent.ts

@@ -0,0 +1,60 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "ES6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "esnext",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "lib": ["dom", "es2015", "es2016"],       /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true,                        /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    "noImplicitAny": true,                    /* Raise error on expressions and declarations with an implied 'any' type. */
+    "strictNullChecks": true,                 /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    "noImplicitThis": true,                   /* Raise error on 'this' expressions with an implied 'any' type. */
+    "alwaysStrict": true,                     /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    "noUnusedLocals": true,                   /* Report errors on unused locals. */
+    "noUnusedParameters": true,               /* Report errors on unused parameters. */
+    "noImplicitReturns": true,                /* Report error when not all code paths in function return a value. */
+    "noFallthroughCasesInSwitch": true,       /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  }
+}