Merge pull request #2 from corpusculejs/feat/registry-builtin

Add minimal implementation of customElements registry

Author: Lodin

README.md

@@ -51,30 +51,38 @@ import 'https://unpkg.com/@corpuscule/custom-builtin-elements';
 To use this polyfill with IE 11 you need the following tools:
 
 - `Symbol` polyfill (with support for `Symbol.hasInstance`).
-- `WeakSet` polyfill.
 - `Promise` polyfill.
 - [@babel/plugin-transform-instanceof](https://www.npmjs.com/package/@babel/plugin-transform-instanceof)
   applied to your code that uses `instanceof` against any built-in constructor
   (like `HTMLButtonElement` etc.).
 
 Also, for all browsers that do not support native web components, you need an
-implementation of the `customElements` registry existing. You may use either the
-[`@webcomponents/webcomponentsjs`](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs)
-polyfill to have autonomous custom elements as well or the following stub that
-would allow you to use only the customized built-in elements. Note that you have
-to place the `customElements` implementation **before** this polyfill.
+implementation of the `customElements` registry existing. You have the following
+choices:
+
+- Use [`@webcomponents/webcomponentsjs`](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs),
+  that will also add support for autonomous custom elements.
+- Use the minimal implementation of `customElements` provided by this polyfill
+  that would allow you to use the customized built-in elements only.
+
+Note that both minimal implementation or `@webcomponents/webcomponentsjs`
+polyfill should be executed **before** the main polyfill because it will
+override methods of the `customElements` registry.
+
+Examples of adding minimal implementation:
+
+- via npm and ESM:
 
 ```javascript
-function impl() {
-  throw new Error('Not supported in this environment');
-}
+import '@corpuscule/custom-builtin-elements/lib/customElementsBase';
+import '@corpuscule/custom-builtin-elements';
+```
+
+- via [https://unpkg.com](https://unpkg.com) and `script`:
 
-window.customElements = {
-  define: impl,
-  get: impl,
-  upgrade: impl,
-  whenDefined: impl,
-};
+```html
+<script src="https://unpkg.com/@corpuscule/custom-builtin-elements/lib/customElementsBase.js">
+<script src="https://unpkg.com/@corpuscule/custom-builtin-elements">
 ```
 
 ## Example

__tests__/index.js

@@ -151,9 +151,7 @@ describe('custom-builtin-elements-polyfill', () => {
         }
 
         class Foo {}
-        expect(() => defineCE(Foo)).toThrowError(
-          'Not supported in this environment',
-        );
+        expect(() => defineCE(Foo)).toThrowError('Not supported');
       });
     });
 
@@ -171,9 +169,7 @@ describe('custom-builtin-elements-polyfill', () => {
           pending();
         }
 
-        expect(() => customElements.get('x-foo')).toThrowError(
-          'Not supported in this environment',
-        );
+        expect(() => customElements.get('x-foo')).toThrowError('Not supported');
       });
     });
 
@@ -202,9 +198,7 @@ describe('custom-builtin-elements-polyfill', () => {
         }
 
         const foo = document.createElement('x-foo');
-        expect(() => customElements.upgrade(foo)).toThrowError(
-          'Not supported in this environment',
-        );
+        expect(() => customElements.upgrade(foo)).toThrowError('Not supported');
       });
     });
 
@@ -222,7 +216,7 @@ describe('custom-builtin-elements-polyfill', () => {
         }
 
         expect(() => customElements.whenDefined('x-foo')).toThrowError(
-          'Not supported in this environment',
+          'Not supported',
         );
       });
     });

__tests__/polyfills.js

@@ -1,20 +1,5 @@
-/* eslint-disable class-methods-use-this */
 import Promise from 'core-js-pure/es/promise';
 import Symbol from 'core-js-pure/es/symbol';
-import WeakSet from 'core-js-pure/es/weak-set';
-
-if (!('customElements' in window)) {
-  const fn = () => {
-    throw new Error('Not supported in this environment');
-  };
-
-  window.customElements = {
-    define: fn,
-    get: fn,
-    upgrade: fn,
-    whenDefined: fn,
-  };
-}
 
 if (!('Promise' in window)) {
   window.Promise = Promise;
@@ -23,7 +8,3 @@ if (!('Promise' in window)) {
 if (!('Symbol' in window)) {
   window.Symbol = Symbol;
 }
-
-if (!('WeakSet' in window)) {
-  window.WeakSet = WeakSet;
-}

karma.conf.js

@@ -38,6 +38,7 @@ module.exports = config => {
 
     files: [
       {pattern: '__tests__/polyfills.js', watched: false},
+      'lib/customElementsBase.js',
       'lib/customBuiltInElements.js',
       {pattern: '__tests__/index.js', watched: false},
     ],

package.json

@@ -5,11 +5,13 @@
   "main": "lib/customBuiltInElements.js",
   "module": "lib/customBuiltInElements.js",
   "files": [
-    "lib/customBuiltInElements.js"
+    "lib/customBuiltInElements.js",
+    "lib/customElementsBase.js"
   ],
   "scripts": {
     "build": "node scripts/build.js",
     "lint": "eslint src/**/*.js",
+    "size": "npm run build && size-limit",
     "test": "npm run build && karma start",
     "test:watch": "npm run test -- --watch",
     "test:coverage": "npm run test -- --coverage"

rollup.config.js

@@ -2,19 +2,33 @@ const babel = require('rollup-plugin-babel');
 const cleanup = require('rollup-plugin-cleanup');
 const nodeResolve = require('rollup-plugin-node-resolve');
 
-module.exports = {
-  input: 'src/index.js',
-  output: {
-    file: 'lib/customBuiltInElements.js',
-    format: 'iife',
-    name: 'customBuiltInElements',
+const plugins = [
+  nodeResolve(),
+  babel(),
+  cleanup({
+    comments: 'none',
+  }),
+];
+
+module.exports = [
+  {
+    input: 'src/index.js',
+    output: {
+      file: 'lib/customBuiltInElements.js',
+      format: 'iife',
+      name: 'customBuiltInElements',
+    },
+    plugins,
+    treeshake: false,
+  },
+  {
+    input: 'src/customElementsBase.js',
+    output: {
+      file: 'lib/customElementsBase.js',
+      format: 'iife',
+      name: 'customElementsBase',
+    },
+    plugins,
+    treeshake: false,
   },
-  plugins: [
-    nodeResolve(),
-    babel(),
-    cleanup({
-      comments: 'none',
-    }),
-  ],
-  treeshake: false,
-};
+];

scripts/build.js

@@ -3,7 +3,7 @@ const {mkdir, writeFile} = require('fs');
 const {dirname, resolve} = require('path');
 const {rollup} = require('rollup');
 const {promisify} = require('util');
-const config = require('../rollup.config');
+const configs = require('../rollup.config');
 
 const mkdirAsync = promisify(mkdir);
 const writeFileAsync = promisify(writeFile);
@@ -13,19 +13,25 @@ const detection = '  if (detect()) { return; }';
 
 (async () => {
   try {
-    const bundle = await rollup(config);
-    const generated = await bundle.generate(config.output);
-    const {
-      output: [{code}],
-    } = generated;
+    await Promise.all(
+      configs.map(async (config, index) => {
+        const bundle = await rollup(config);
+        const generated = await bundle.generate(config.output);
+        let {
+          output: [{code}],
+        } = generated;
 
-    const [first, second, ...other] = code.split('\n');
-    const result = [first, second, detection, ...other].join('\n');
+        if (index === 0) {
+          const [first, second, ...other] = code.split('\n');
+          code = [first, second, detection, ...other].join('\n');
+        }
 
-    const resultFile = resolve(cwd, config.output.file);
+        const resultFile = resolve(cwd, config.output.file);
 
-    await mkdirAsync(dirname(resultFile), {recursive: true});
-    await writeFileAsync(resultFile, result, 'utf8');
+        await mkdirAsync(dirname(resultFile), {recursive: true});
+        await writeFileAsync(resultFile, code, 'utf8');
+      }),
+    );
   } catch (e) {
     console.error(e.stack);
     process.exit(1);

src/customElementsBase.js

@@ -0,0 +1,12 @@
+if (!('customElements' in window)) {
+  const mock = () => {
+    throw new Error('Not supported');
+  };
+
+  window.customElements = {
+    define: mock,
+    get: mock,
+    upgrade: mock,
+    whenDefined: mock,
+  };
+}

src/patchCustomElementRegistry.js

@@ -60,7 +60,7 @@ function patchCustomElementRegistry() {
 
         if (!patchedPrototypesRegistry.has(firstChild)) {
           setPrototypeOf(firstChild, nativeConstructor.prototype);
-          patchedPrototypesRegistry.add(firstChild);
+          patchedPrototypesRegistry.set(firstChild, 0);
         }
 
         elementsRegistry[name] = constructor;

src/patchNativeConstructors.js

@@ -24,7 +24,8 @@ function attributeChanged(mutations) {
 }
 
 function patchNativeConstructors() {
-  nativeConstructorNames.forEach(nativeConstructorName => {
+  nativeConstructorNames.forEach(nativeNamePart => {
+    const nativeConstructorName = `HTML${nativeNamePart}Element`;
     const NativeConstructor = window[nativeConstructorName];
 
     class PolyfilledConstructor {