p-elements-core 2.0.15 → 2.1.0-rc10

package/src/sample.css

@@ -1,19 +0,0 @@
-:host{
-  display: block;
-  @apply --mixin-sample;
-}
-.root {
-  display: flex;
-  padding: 10px;
-  flex-direction: row;
-}
-
-div .xxx{
-  color: var(--color-primary, blue);
-}
-
-#SlotContainer ::slotted(*) {
-  font-weight: bold;
-  color: black;
-  font-size: 1.5em;
-}

package/src/sample.spec.ts

@@ -1,112 +0,0 @@
-describe("my-greetings custom element", () => {
-
-  it("Should be defined", (done) => {
-    let elementIsDefined = false;
-    customElements.whenDefined("my-greetings").then(() => {
-      elementIsDefined = true;
-      expect(elementIsDefined).toBe(true);
-      done();
-    });
-  });
-
-  it("Should have shadow root", (done) => {
-    const element = document.createElement("my-greetings");
-    document.body.appendChild(element);
-    expect(typeof element.shadowRoot).toBe("object");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  it("Should have shadow root child element with text 'Hello!!'", (done) => {
-    const element = document.createElement("my-greetings");
-    document.body.appendChild(element);
-    expect( (element.shadowRoot.querySelector(".sample") as HTMLElement).innerText).toBe("Hello!!");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  it("Should display heading with text typed in input", (done) => {
-    const element = document.createElement("my-greetings");
-    document.body.appendChild(element);
-    const inputElement = element.shadowRoot.querySelector("input");
-
-    inputElement.value = "Lorem ipsum Dolar sit";
-    inputElement.dispatchEvent(new Event("input"));
-
-    setTimeout(() => {
-      expect( element.shadowRoot.querySelector(".title").innerHTML).toBe(inputElement.value);
-      element.parentNode.removeChild(element);
-      done();
-    }, 100)
-  });
-
-  it("Should display heading with the same text as element attribute name", (done) => {
-    const element = document.createElement("my-greetings");
-    element.setAttribute("name", "Arnold");
-    document.body.appendChild(element);
-    expect( element.shadowRoot.querySelector(".title").innerHTML).toBe("Arnold");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  it("Should display heading with the same text as element attribute name after changing the attribute", (done) => {
-    const element = document.createElement("my-greetings");
-    element.setAttribute("name", "Arnold");
-    document.body.appendChild(element);
-    element.setAttribute("name", "Kees");
-    expect( element.shadowRoot.querySelector(".title").innerHTML).toBe("Kees");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  it("Should display heading with the same text as element propery", (done) => {
-    const element = document.createElement("my-greetings") as any;
-    element.name = "Arie";
-    document.body.appendChild(element);
-    expect( element.shadowRoot.querySelector(".title").innerHTML).toBe("Arie");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  it("Should display heading with the same text as element property name after changing the property", (done) => {
-    const element = document.createElement("my-greetings") as any;
-    element.name = "Jeffreyd";
-    document.body.appendChild(element);
-    element.name = "Martijn";
-    expect( element.shadowRoot.querySelector(".title").innerHTML).toBe("Martijn");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  // betty BOOP => Brilliant Online Objects Programmers
-  it("Should display BB when property name is 'Peter'", (done) => {
-    const element = document.createElement("my-greetings") as any;
-    element.name = "Peter";
-    document.body.appendChild(element);
-    expect( typeof element.shadowRoot.querySelector(".is-peter--image")).toBe("object");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-});
-
-describe("super-a custom element extends a", () => {
-
-  it("Should be defined", (done) => {
-    let elementIsDefined = false;
-    customElements.whenDefined("super-a").then(() => {
-      elementIsDefined = true;
-      expect(elementIsDefined).toBe(true);
-      done();
-    });
-  });
-
-  it("Should be red", (done) => {
-    const element = (document as any).createElement("a", {is: "super-a"});
-    document.body.appendChild(element);
-    expect(element.style.color).toBe("red");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-});

package/src/sample.tsx

@@ -1,187 +0,0 @@
-import { Bind } from "./decorators/bind";
-import { CustomElementConfig } from "./decorators/custom-element-config";
-import { PropertyRenderOnSet } from "./decorators/property-render-on-set";
-import { ReflectToAttribute } from "./decorators/reflect-to-attribute";
-
-import {  CustomElement } from "./custom-element";
-
-import * as anime from "animejs";
-
-declare var require: any;
-
-@CustomElementConfig({
-  tagName: "my-greetings",
-})
-class MyGreetings extends CustomElement {
-
-  static get observedAttributes() {
-    return ["name"];
-  }
-
-  @PropertyRenderOnSet
-  @ReflectToAttribute
-  public foo: string = "foo";
-
-  private count: number = 1;
-
-  @PropertyRenderOnSet
-  @ReflectToAttribute
-  private name: string = "";
-
-  private onInput = (e) =>  {
-    this.name = e.target.value;
-  }
-
-  private init() {
-    //
-  }
-
-  private enterAnimation(domNode, properties) {
-    anime({
-      targets: domNode,
-      translateX: [
-        { value: 100, duration: 1200 },
-        { value: 0, duration: 800 },
-      ],
-      rotate: "1turn",
-      duration: 3000,
-      loop: false,
-    });
-  }
-
-  private exitAnimation(domNode, removeDomNodeFunction, properties) {
-    anime({
-      targets: domNode,
-      translateX: [
-        { value: 100, duration: 1200 },
-        { 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",
-    }]);
-  }
-
-  private render() {
-    return <div class="xxx">
-      <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"
-            enterAnimation={this.enterAnimation}
-            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>;
-  }
-
-  private peterRemoved() {
-    console.log("removed");
-  }
-
-  private peterCreate() {
-    console.log("create");
-  }
-
-  private connectedCallback() {
-    const css = require("./sample.css");
-    const template = this.templateFromString(`
-      <style>${css}</style>
-      <div class="root"></div>
-    `);
-    this.shadowRoot.appendChild(template);
-
-    this.createProjector(this.shadowRoot.querySelector(".root"), this.render.bind(this));
-
-    setInterval(() => {
-      this.count++;
-      this.renderNow();
-    }, 5000);
-
-    window.addEventListener("foo", this.onFooEvent);
-
-  }
-
-  private onFooEvent = (e: CustomEvent) => {
-    this.foo = e.detail.foo;
-  }
-
-  private attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "name") {
-      this.name = newValue;
-    }
-  }
-}
-
-@CustomElementConfig({
-  tagName: "p-foo",
-})
-class PFoo extends CustomElement {
-  private connectedCallback() {
-    const css = require("./sample.css");
-    this.innerHTML = `
-      <div class="root">P-FOO</div>
-    `;
-  }
-
-}
-
-@CustomElementConfig({
-  tagName: "p-bar",
-})
-class PBar extends CustomElement {
-
-  private connectedCallback() {
-    const css = require("./bar.css");
-    this.initShadowRoot(`<style>${css}</style>`, this.render);
-  }
-
-  private render = function() {
-    return <div>
-      <h1 onclick={(e) => {console.log(this); }}>Foo bar</h1>
-    </div>;
-  };
-
-}
-
-(window as any).PBar = PBar;
-
-class SuperAnchorElement extends HTMLAnchorElement {
-
-  public connectedCallback() {
-    this.classList.add("super");
-    this.style.color = "red";
-  }
-
-}
-
-window.customElements.define("super-a", SuperAnchorElement, { extends: "a" });

package/src/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "module": "es6",
-    "strictNullChecks": true,
-    "noEmitOnError": true,
-    "noEmit": false,
-    "declaration": true,
-    "outDir": "../dist",
-    "rootDir": "."
-  },
-  "include": [
-    "./**/*.ts",
-    "../typings/extensions.d.ts"
-  ]
-}

package/theme.css

@@ -1,12 +0,0 @@
-:root{
-
-  --color-primary: red;
-
-  --mixin-sample: {
-    border: 2px solid black;
-    background-color: green;
-    margin: 5px;
-    padding: 5px;
-  }
-
-}

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es6",
-    "moduleResolution": "node",
-    "allowJs": false,
-    "noEmit": false,
-    "strict": false,
-    "isolatedModules": false,
-    "esModuleInterop": true,
-    "noImplicitThis": false,
-    "experimentalDecorators": true,
-    "jsx": "preserve"
-  },
-  "include": [
-    "src"
-  ]
-}

package/tslint.json

@@ -1,33 +0,0 @@
-{
-  /*
-   * Possible values:
-   * - the name of a built-in config
-   * - the name of an NPM module which has a "main" file that exports a config object
-   * - a relative path to a JSON file
-   */
-  "extends": "tslint:recommended",
-  "rules": {
-    /*
-     * Any rules specified here will override those from the base config we are extending.
-     */
-    "curly": true,
-    "variable-name": [
-      true,
-      "ban-keywords",
-      "check-format",
-      "allow-leading-underscore"
-    ]
-  },
-  "jsRules": {
-    /*
-     * Any rules specified here will override those from the base config we are extending.
-     */
-    "curly": true
-  },
-  "rulesDirectory": [
-    /*
-     * A list of relative or absolute paths to directories that contain custom rules.
-     * See the Custom Rules documentation below for more details.
-     */
-  ]
-}

package/webpack.config.js

@@ -1,100 +0,0 @@
-const path = require('path');
-const babelOptions = {
-  "presets": [
-    ["@babel/preset-env", {
-      "targets": {
-        "browsers": require("./package.json").browserslist
-      }
-    }],
-    ["@babel/preset-react", {
-      "pragma": "h"
-    }]
-  ],
-  "plugins": [
-    "@babel/proposal-class-properties",
-    "@babel/proposal-object-rest-spread"
-  ]
-};
-
-module.exports = {
-  mode: 'production',
-  devServer: {
-    contentBase: path.join(__dirname),
-    compress: true,
-    useLocalIp: true,
-    disableHostCheck: true,
-    host: '0.0.0.0',
-    port: 8000,
-    open: false,
-    openPage: 'demo/index.html',
-    publicPath: '/dist/'
-  },
-  entry: {
-    'p-elements-core': [
-      '@babel/polyfill',
-      '@webcomponents/template/template.js',
-      'whatwg-fetch/fetch.js',
-      'document-register-element/build/document-register-element.max.js',
-      '@webcomponents/shadydom/shadydom.min.js',
-      '@webcomponents/shadycss/custom-style-interface.min.js',
-      '@webcomponents/shadycss/apply-shim.min.js',
-      '@webcomponents/shadycss/scoping-shim.min.js',
-      'dom4/build/dom4.max.js',
-      './src/index.tsx',
-    ],
-    'p-elements-core-modern': [
-      '@webcomponents/template/template.js',
-      'document-register-element/build/document-register-element.max.js',
-      '@webcomponents/shadydom/shadydom.min.js',
-      '@webcomponents/shadycss/custom-style-interface.min.js',
-      '@webcomponents/shadycss/apply-shim.min.js',
-      '@webcomponents/shadycss/scoping-shim.min.js',
-      'dom4/build/dom4.max.js',
-      './src/index.tsx',
-    ],
-    'sample': [
-      './src/sample.tsx'
-    ]
-
-  },
-  output: {
-    path: path.resolve(__dirname, './dist'),
-    filename: '[name]' + '.js',
-    chunkFilename: '[chunkhash]' + '.js'
-  },
-  externals: {
-    'underscore': '_',
-    'animejs': 'anime'
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json']
-  },
-  module: {
-    rules: [{
-      test: /\.ts(x?)$/,
-      exclude: /node_modules/,
-      use: [{
-          loader: 'babel-loader',
-          options: babelOptions
-        },
-        {
-          loader: 'awesome-typescript-loader'
-        },
-      ]
-    },{
-      test: /\.css$/,
-      use: [{
-          loader: 'css-loader'
-        },
-        {
-          loader: 'postcss-loader',
-          options: {
-            plugins: () => {
-              return [require('autoprefixer')]
-            }
-          }
-        },
-      ]
-    }]
-  },
-};

package/webpack.config.karma.js

@@ -1,35 +0,0 @@
-'use strict';
-
-var webpack = require('webpack');
-var path = require('path');
-var glob = require('glob');
-
-module.exports = {
-  entry: glob.sync( './src/*.spec.ts').join("|").replace(/.spec.ts+/g,".spec").split("|"),
-  module: {
-    rules: [{
-      test: /\.ts$/,
-      include: [
-        path.resolve(__dirname, 'src'),
-      ],
-      exclude: [
-        /node_modules/
-      ],
-      loader: 'awesome-typescript-loader',
-    }]
-  },
-  resolve: {
-    modules: [
-      'node_modules',
-    ],
-    extensions: ['.ts', '.js'],
-  },
-  devtool: 'inline-source-map',
-  stats: "verbose",
-  plugins: [
-    new webpack.SourceMapDevToolPlugin({
-      filename: null,
-      test: /\.(ts|js)($|\?)/i
-    })
-  ],
-};