p-elements-core 1.2.0-rc7 → 1.2.0

package/src/projector.ts

@@ -0,0 +1,110 @@
+import { applyDefaultProjectionOptions, dom } from "./dom";
+
+/**
+ * Creates a [[Projector]] instance using the provided projectionOptions.
+ *
+ * For more information, see [[Projector]].
+ *
+ * @param projectorOptions   Options that influence how the DOM is rendered and updated.
+ */
+export let createProjector = (
+  projectorOptions?: ProjectorOptions
+): Projector => {
+  let projector: Projector;
+  let projectionOptions = applyDefaultProjectionOptions(projectorOptions);
+  projectionOptions.eventHandlerInterceptor = function (
+    propertyName: string,
+    eventHandler: Function,
+    domNode: Node,
+    properties: VNodeProperties
+  ) {
+    return function (this: Node) {
+      // intercept function calls (event handlers) to do a render afterwards.
+      projector.scheduleRender();
+      return eventHandler.apply(properties.bind || this, arguments);
+    };
+  };
+  let renderCompleted = true;
+  let scheduled: number | undefined;
+  let stopped = false;
+  let projections = [] as Projection[];
+  let renderFunctions = [] as (() => VNode)[]; // matches the projections array
+
+  let doRender = function () {
+    scheduled = undefined;
+    if (!renderCompleted) {
+      return; // The last render threw an error, it should be logged in the browser console.
+    }
+    renderCompleted = false;
+    for (let i = 0; i < projections.length; i++) {
+      let updatedVnode = renderFunctions[i]();
+      projections[i].update(updatedVnode);
+    }
+    renderCompleted = true;
+  };
+
+  projector = {
+    renderNow: doRender,
+    scheduleRender: () => {
+      if (!scheduled && !stopped) {
+        scheduled = requestAnimationFrame(doRender);
+      }
+    },
+    stop: () => {
+      if (scheduled) {
+        cancelAnimationFrame(scheduled);
+        scheduled = undefined;
+      }
+      stopped = true;
+    },
+
+    resume: () => {
+      stopped = false;
+      renderCompleted = true;
+      projector.scheduleRender();
+    },
+
+    append: (parentNode, renderMaquetteFunction) => {
+      projections.push(
+        dom.append(parentNode, renderMaquetteFunction(), projectionOptions)
+      );
+      renderFunctions.push(renderMaquetteFunction);
+    },
+
+    insertBefore: (beforeNode, renderMaquetteFunction) => {
+      projections.push(
+        dom.insertBefore(
+          beforeNode,
+          renderMaquetteFunction(),
+          projectionOptions
+        )
+      );
+      renderFunctions.push(renderMaquetteFunction);
+    },
+
+    merge: (domNode, renderMaquetteFunction) => {
+      projections.push(
+        dom.merge(domNode, renderMaquetteFunction(), projectionOptions)
+      );
+      renderFunctions.push(renderMaquetteFunction);
+    },
+
+    replace: (domNode, renderMaquetteFunction) => {
+      projections.push(
+        dom.replace(domNode, renderMaquetteFunction(), projectionOptions)
+      );
+      renderFunctions.push(renderMaquetteFunction);
+    },
+
+    detach: (renderMaquetteFunction) => {
+      for (let i = 0; i < renderFunctions.length; i++) {
+        if (renderFunctions[i] === renderMaquetteFunction) {
+          renderFunctions.splice(i, 1);
+          return projections.splice(i, 1)[0];
+        }
+      }
+      throw new Error("renderMaquetteFunction was not found");
+    },
+  };
+  return projector;
+};

package/src/sample.tsx

@@ -1,12 +1,15 @@
-import {PropertyRenderOnSet, CustomElement, CustomElementConfig } from "./utils/custom-element";
+import {
+  PropertyRenderOnSet,
+  CustomElement,
+  CustomElementConfig,
+  Bind,
+} from "./custom-element";
 import * as anime from "animejs";
 
-
 @CustomElementConfig({
   tagName: "my-greetings",
 })
 class MyGreetings extends CustomElement {
-
   private count: number = 1;
 
   @PropertyRenderOnSet
@@ -15,20 +18,20 @@ class MyGreetings extends CustomElement {
   @PropertyRenderOnSet
   public foo: string = "foo";
 
-  private onInput = (e)  => {
+  private onInput = (e) => {
     this.name = e.target.value;
-  }
+  };
 
   private enterAnimation(domNode, properties) {
     anime({
       targets: domNode,
       translateX: [
         { value: 100, duration: 1200 },
-        { value: 0, duration: 800 }
+        { value: 0, duration: 800 },
       ],
-      rotate: '1turn',
+      rotate: "2turn",
       duration: 3000,
-      loop: false
+      loop: false,
     });
   }
 
@@ -37,56 +40,96 @@ class MyGreetings extends CustomElement {
       targets: domNode,
       translateX: [
         { value: 100, duration: 1200 },
-        { value: 0, duration: 800 }
+        { value: 0, duration: 800 },
       ],
       duration: 3000,
       opacity: 0,
       loop: false,
       complete: () => {
         removeDomNodeFunction(domNode);
-      }
+      },
     });
   }
 
   private countUpdateAnimation(domNode, properties, previousProperties) {
     const basicTimeline = anime.timeline();
-    basicTimeline.add([{
-      duration: 300,
-      targets: domNode,
-      translateX: 200,
-      scale: 1.9,
-      easing: 'easeOutExpo'
-    }, {
-      duration: 300,
-      targets: domNode,
-      translateX: 0,
-      scale: 1,
-      easing: 'easeInExpo'
-    }]);
+    basicTimeline.add([
+      {
+        duration: 300,
+        targets: domNode,
+        translateX: 200,
+        scale: 1.9,
+        easing: "easeOutExpo",
+      },
+      {
+        duration: 300,
+        targets: domNode,
+        translateX: 0,
+        scale: 1,
+        easing: "easeInExpo",
+      },
+    ]);
   }
 
+  private onPeterClick = (e) => {
+    console.log({ e, p: this });
+  };
+
   private render = () => {
-    return <div>
-      <h1 id="Foo">Hallo</h1>
-      <h1 data-title={this.name && this.name.toLocaleUpperCase()} class="title">{this.foo} {this.name}</h1>
-      <p data-count={this.count} updateAnimation={this.countUpdateAnimation}>{this.count}</p>
-      <div id="SlotContainer"><slot></slot></div>
-      <p>Please enter your name (hint type <em><strong>Peter</strong></em>)<br />
-        <input type="text" value={this.name} oninput={this.onInput} />
-      </p>
-      <p><a is="super-a">Super a</a></p>
-      {
-        this.name && this.name.toLowerCase && this.name.toLowerCase().indexOf("peter") > -1 ?
-          <div key="peter" afterRemoved={this.peterRemoved} afterCreate={this.peterCreate}
+    return (
+      <div>
+        <h1 eventListeners={[["click", (e) => console.log(e)]]} id="Foo">
+          Hallo
+        </h1>
+
+        <h1
+          data-title={this.name && this.name.toLocaleUpperCase()}
+          class="title"
+        >
+          {this.foo} {this.name}
+        </h1>
+        <p data-count={this.count} updateAnimation={this.countUpdateAnimation}>
+          {this.count}
+        </p>
+        <div id="SlotContainer">
+          <slot></slot>
+        </div>
+        <p>
+          Please enter your name (hint type{" "}
+          <em>
+            <strong>Peter</strong>
+          </em>
+          )<br />
+          <input type="text" value={this.name} oninput={this.onInput} />
+        </p>
+        <p>
+          <a is="super-a">Super a</a>
+        </p>
+        {this.name &&
+        this.name.toLowerCase &&
+        this.name.toLowerCase().indexOf("peter") > -1 ? (
+          <div
+            key="peter"
+            afterRemoved={this.peterRemoved}
+            afterCreate={this.peterCreate}
             class="is-peter"
+            eventListeners={[["click", this.onPeterClick]]}
             enterAnimation={this.enterAnimation}
-            exitAnimation={this.exitAnimation}>
+            exitAnimation={this.exitAnimation}
+          >
             <p>Hello Peter</p>
-            <img class="is-peter--image" src="https://s-media-cache-ak0.pinimg.com/474x/ce/1d/07/ce1d07011c0afb8e0614a0ae42a8c861.jpg" height="140" />
-          </div> : ""
-      }
-    </div>;
-  }
+            <img
+              class="is-peter--image"
+              src="https://s-media-cache-ak0.pinimg.com/474x/ce/1d/07/ce1d07011c0afb8e0614a0ae42a8c861.jpg"
+              height="140"
+            />
+          </div>
+        ) : (
+          ""
+        )}
+      </div>
+    );
+  };
 
   private peterRemoved() {
     console.log("removed");
@@ -97,10 +140,31 @@ class MyGreetings extends CustomElement {
   }
 
   connectedCallback() {
-
-    let css = require("./sample.css");
     let template = this.templateFromString(`
-      <style>${css}</style>
+      <style>
+
+        :host{
+          /* display: none; */
+        }
+
+        .root {
+          display: flex;
+          padding: 10px;
+          flex-direction: row;
+        }
+
+        #Foo {
+          @apply --mixin-sample;
+          text-decoration: underline;
+        }
+
+        #SlotContainer ::slotted(*) {
+          font-weight: bold;
+          color: green;
+          font-size: 1.5em;
+        }
+
+      </style>
       <div class="root"></div>
     `);
 
@@ -114,12 +178,11 @@ class MyGreetings extends CustomElement {
     }, 5000);
 
     window.addEventListener("foo", this.onFooEvent);
-
   }
 
   private onFooEvent = (e: CustomEvent) => {
     this.foo = e.detail.foo;
-  }
+  };
 
   static get observedAttributes() {
     return ["name"];
@@ -137,8 +200,9 @@ class MyGreetings extends CustomElement {
 })
 class PFoo extends CustomElement {
   private connectedCallback() {
-    let css = require("./sample.css");
-    const template = this.templateFromString(`<style>:host{color: red}</style><div class="root"></div>`);
+    const template = this.templateFromString(
+      `<style>:host{color: red}</style><div class="root"></div>`
+    );
     this.shadowRoot.appendChild(template);
 
     this.shadowRoot.querySelector(".root").innerHTML = `
@@ -148,12 +212,10 @@ class PFoo extends CustomElement {
 }
 
 class SuperAnchorElement extends HTMLAnchorElement {
-
   public connectedCallback() {
     this.classList.add("super");
     this.style.color = "red";
   }
-
 }
 
 window.customElements.define("super-a", SuperAnchorElement, { extends: "a" });

package/tsconfig.json

@@ -15,7 +15,7 @@
     "rootDir": "./src",                       /* 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. */
+    // "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'). */

package/webpack.config.js

@@ -1,167 +1,57 @@
-'use strict';
-
+const path = require("path");
 const webpack = require('webpack');
-const fs = require('fs');
-const path = require('path');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
-const WebpackAutoInject = require('webpack-auto-inject-version');
-
-module.exports = function (env) {
-
-  const babelOptions = {
-    'presets': [
-      ['@babel/preset-env', {
-        'targets': {
-          'browsers': require('./package.json').browserslist
-        }
-      }],
-      ['@babel/preset-react', {
-        'pragma': 'h'
-      }]
+const TerserPlugin = require("terser-webpack-plugin")
+const package = require('./package.json');
+const banner = `P-ELEMENTS ${package.version} - ${new Date()}`;
+
+module.exports = {
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          format: {
+            comments: /^\**!/i,
+          },
+        },
+        extractComments: false,
+      }),
     ],
-    'plugins': [
-      ['@babel/plugin-proposal-class-properties', {
-        'loose': true
-      }],
-      '@babel/proposal-object-rest-spread',
-      'jsx-auto-key-attr'
-    ]
-  };
-
-
-  let entries = [];
-  let filename = 'p-elements-core.js';
-
-  if (env && env.modern) {
-    entries = [
-      '@webcomponents/shadydom/shadydom.min.js',
-      '@webcomponents/shadycss/scoping-shim.min.js',
-      '@webcomponents/shadycss/apply-shim.min.js',
-      '@webcomponents/shadycss/custom-style-interface.min.js',
-      'document-register-element/build/document-register-element.js',
-      'underscore',
-      './index.tsx',
-    ];
-    filename = 'p-elements-core-modern.js';
-  } else {
-    entries = [
-      'element-closest',
-      '@webcomponents/template/template.js',
-      '@babel/polyfill',
-      'whatwg-fetch',
-      './custom-event-polyfill.js',
-      '@webcomponents/shadydom/shadydom.min.js',
-      '@webcomponents/shadycss/scoping-shim.min.js',
-      '@webcomponents/shadycss/apply-shim.min.js',
-      '@webcomponents/shadycss/custom-style-interface.min.js',
-      'document-register-element/build/document-register-element.js',
-      'underscore',
-      './index.tsx']
-    }
-
-    // entries = [
-    //   '@webcomponents/shadydom/shadydom.min.js',
-    //   '@webcomponents/shadycss/scoping-shim.min.js',
-    //   '@webcomponents/shadycss/apply-shim.min.js',
-    //   '@webcomponents/shadycss/custom-style-interface.min.js',
-    //   'document-register-element/build/document-register-element.js',
-    //   'underscore',
-    //   './index.tsx',
-    // ];
-    // filename = 'p-elements-core-modern.js';
-
-  let plugins = [
-    new webpack.ProvidePlugin({
-      global: require.resolve('./global.js')
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'p-elements-core',
-      minChunks: Infinity,
-      filename: filename
-    }),
-    new webpack.NamedModulesPlugin(),
-  ];
-
-  if (env && !env.dev) {
-    plugins.push(new UglifyJSPlugin());
-    plugins.push(new WebpackAutoInject({
-      // specify the name of the tag in the outputed files eg
-      // bundle.js: [SHORT]  Version: 0.13.36 ...
-      SHORT: 'P-ELEMENTS',
-      SILENT: false,
-      PACKAGE_JSON_PATH: './package.json',
-      components: {
-        AutoIncreaseVersion: true,
-        InjectAsComment: true,
-        InjectByTag: true
+  },
+  plugins: [
+    new webpack.BannerPlugin({banner}),
+  ],
+  entry: {
+    "dist/p-elements-core-modern": [
+      "@webcomponents/shadycss/apply-shim.min.js",
+      "@webcomponents/shadycss/custom-style-interface.min.js",
+      "document-register-element/build/document-register-element.js",
+      "underscore",
+      "./src/index.ts",
+    ],
+    "demo/sample": ["./src/sample.tsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: ["babel-loader", "ts-loader"],
+        exclude: /node_modules/,
       },
-      componentsOptions: {
-        AutoIncreaseVersion: {
-          runInWatchMode: false // it will increase version with every single build!
-        },
-        InjectAsComment: {
-          tag: 'p-elements-core@{version} - {date}',
-          dateFormat: 'mmmm dS, yyyy, h:MM'
-        }
-      }
-    }));
-  }
-
-  let entry = {
-    'p-elements-core': entries,
-    'sample': [
-      './sample.tsx'
-    ]
-  };
-
-  return {
-    node: {
-      global: false
-    },
-    cache: true,
-    context: path.resolve(__dirname, './src'),
-    entry,
-    devtool: 'source-map',
-    output: {
-      path: path.resolve(__dirname, './dist'),
-      filename: '[name]' + '.js',
-      chunkFilename: '[chunkhash]' + '.js'
-    },
-    module: {
-      rules: [
-        {
-          test: /\.ts(x?)$/,
-          exclude: /node_modules/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: babelOptions
-            },
-            {
-              loader: 'awesome-typescript-loader'
-            }
-          ]
-        },
-        {
-          test: /\.css$/,
-          use: [
-            { loader: 'to-string-loader' },
-            { loader: 'css-loader' },
-            {
-              loader: 'postcss-loader',
-              options: {
-                plugins: function () {
-                  return [require('autoprefixer'), require('cssnano')]
-                }
-              }
-            },
-          ]
-        }
-      ]
-    },
-    plugins: plugins,
-    resolve: {
-      extensions: ['.ts', '.tsx', '.js'],
+    ],
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"],
+  },
+  output: {
+    path: path.resolve(__dirname),
+    filename: "[name]" + ".js",
+    chunkFilename: "[chunkhash]" + ".js",
+  },
+  devServer: {
+    static: {
+      directory: __dirname,
     },
-  }
+    port: 5001,
+  },
 };

package/dist/sample.js

@@ -1,2 +0,0 @@
-// [P-ELEMENTS]  p-elements-core@1.2.0-rc6 - December 23rd, 2021, 7:49  
- webpackJsonp([0],{"../node_modules/css-loader/index.js!../node_modules/postcss-loader/index.js?{}!./sample.css":function(e,t,n){(e.exports=n("../node_modules/css-loader/lib/css-base.js")(!1)).push([e.i,".root{display:-ms-flexbox;display:flex;padding:10px;-ms-flex-direction:row;flex-direction:row}#Foo{@apply --mixin-sample;text-decoration:underline}#SlotContainer ::slotted(*){font-weight:700;color:green;font-size:1.5em}",""])},"../node_modules/css-loader/lib/css-base.js":function(e,t){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=function(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var r=function(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}(o),i=o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"});return[n].concat(i).concat([r]).join("\n")}return[n].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},r=0;r<this.length;r++){var i=this[r][0];"number"==typeof i&&(o[i]=!0)}for(r=0;r<e.length;r++){var a=e[r];"number"==typeof a[0]&&o[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},"./sample.css":function(e,t,n){var o=n("../node_modules/css-loader/index.js!../node_modules/postcss-loader/index.js?{}!./sample.css");e.exports="string"==typeof o?o:o.toString()},"./sample.tsx":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n("./utils/custom-element.ts"),r=n("../node_modules/animejs/anime.min.js");n.n(r);function i(e){var t="function"==typeof Map?new Map:void 0;return(i=function(e){if(null===e||!function(e){return-1!==Function.toString.call(e).indexOf("[native code]")}(e))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return a(e,arguments,y(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),f(n,e)})(e)}function a(e,t,n){return(a=d()?Reflect.construct:function(e,t,n){var o=[null];o.push.apply(o,t);var r=new(Function.bind.apply(e,o));return n&&f(r,n.prototype),r}).apply(null,arguments)}function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function s(e,t,n){return t&&c(e.prototype,t),n&&c(e,n),e}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&f(e,t)}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){var t=d();return function(){var n,o=y(e);if(t){var r=y(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return function(e,t){if(t&&("object"===m(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,n)}}function d(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(e){return!1}}function y(e){return(y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function m(e){"@babel/helpers - typeof";return(m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var v=this&&this.__decorate||function(e,t,n,o){var r,i=arguments.length,a=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"===("undefined"==typeof Reflect?"undefined":m(Reflect))&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,o);else for(var u=e.length-1;u>=0;u--)(r=e[u])&&(a=(i<3?r(a):i>3?r(t,n,a):r(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a},b=function(e){l(i,o["a"]);var t=p(i);function i(){var e;return u(this,i),(e=t.apply(this,arguments)).count=1,e.name="",e.foo="foo",e.onInput=function(t){e.name=t.target.value},e.render=function(){return h("div",{key:"1"},h("h1",{id:"Foo",key:"2"},"Hallo"),h("h1",{"data-title":e.name&&e.name.toLocaleUpperCase(),class:"title",key:"3"},e.foo," ",e.name),h("p",{"data-count":e.count,updateAnimation:e.countUpdateAnimation,key:"4"},e.count),h("div",{id:"SlotContainer",key:"5"},h("slot",{key:"6"})),h("p",{key:"7"},"Please enter your name (hint type ",h("em",{key:"8"},h("strong",{key:"9"},"Peter")),")",h("br",{key:"10"}),h("input",{type:"text",value:e.name,oninput:e.onInput,key:"11"})),h("p",{key:"12"},h("a",{is:"super-a",key:"13"},"Super a")),e.name&&e.name.toLowerCase&&e.name.toLowerCase().indexOf("peter")>-1?h("div",{key:"peter",afterRemoved:e.peterRemoved,afterCreate:e.peterCreate,class:"is-peter",enterAnimation:e.enterAnimation,exitAnimation:e.exitAnimation},h("p",{key:"14"},"Hello Peter"),h("img",{class:"is-peter--image",src:"https://s-media-cache-ak0.pinimg.com/474x/ce/1d/07/ce1d07011c0afb8e0614a0ae42a8c861.jpg",height:"140",key:"15"})):"")},e.onFooEvent=function(t){e.foo=t.detail.foo},e}return s(i,[{key:"enterAnimation",value:function(e,t){r({targets:e,translateX:[{value:100,duration:1200},{value:0,duration:800}],rotate:"1turn",duration:3e3,loop:!1})}},{key:"exitAnimation",value:function(e,t,n){r({targets:e,translateX:[{value:100,duration:1200},{value:0,duration:800}],duration:3e3,opacity:0,loop:!1,complete:function(){t(e)}})}},{key:"countUpdateAnimation",value:function(e,t,n){r.timeline().add([{duration:300,targets:e,translateX:200,scale:1.9,easing:"easeOutExpo"},{duration:300,targets:e,translateX:0,scale:1,easing:"easeInExpo"}])}},{key:"peterRemoved",value:function(){console.log("removed")}},{key:"peterCreate",value:function(){console.log("create")}},{key:"connectedCallback",value:function(){var e=this,t=n("./sample.css"),o=this.templateFromString("\n      <style>".concat(t,'</style>\n      <div class="root"></div>\n    '));this.shadowRoot.appendChild(o),this.createProjector(this.shadowRoot.querySelector(".root"),this.render),setInterval(function(){e.count++,e.renderNow()},5e3),window.addEventListener("foo",this.onFooEvent)}},{key:"attributeChangedCallback",value:function(e,t,n){"name"===e&&(this.name=n)}}],[{key:"observedAttributes",get:function(){return["name"]}}]),i}();v([o.b],b.prototype,"name",void 0),v([o.b],b.prototype,"foo",void 0),b=v([n.i(o.c)({tagName:"my-greetings"})],b);var g=function(e){l(r,o["a"]);var t=p(r);function r(){return u(this,r),t.apply(this,arguments)}return s(r,[{key:"connectedCallback",value:function(){n("./sample.css");var e=this.templateFromString('<style>:host{color: red}</style><div class="root"></div>');this.shadowRoot.appendChild(e),this.shadowRoot.querySelector(".root").innerHTML="\n      <div>P-FOO</div>\n    "}}]),r}();g=v([n.i(o.c)({tagName:"p-foo"})],g);var k=function(e){l(n,i(HTMLAnchorElement));var t=p(n);function n(){return u(this,n),t.apply(this,arguments)}return s(n,[{key:"connectedCallback",value:function(){this.classList.add("super"),this.style.color="red"}}]),n}();window.customElements.define("super-a",k,{extends:"a"})},0:function(e,t,n){e.exports=n("./sample.tsx")}},[0]); 

package/global.js

@@ -1 +0,0 @@
-module.exports = window

package/karma.conf.js

@@ -1,32 +0,0 @@
-module.exports = function (config) {
-
-  const webpackConfig = require('./webpack.config.karma.js');
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine'],
-    files: [{
-        pattern: './dist/p-elements-core.js',
-        included: true,
-        watched: false,
-        served: true
-      },
-      './dist/**/*.*',
-      './**/*.spec.ts'
-    ],
-    preprocessors: {
-      'src/**/*.spec.ts': ['webpack']
-    },
-    mime: {
-      'text/x-typescript': ['ts', 'tsx']
-    },
-    webpack: webpackConfig,
-    reporters: ['dots'],
-    port: 9876,
-    runnerPort: 9100,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: true
-  });
-};