@mantou/gem 1.6.2 → 1.6.8

package/src/examples/gesture/index.ts

@@ -1,97 +0,0 @@
-import { render, GemElement, html, customElement, refobject, RefObject } from '../..';
-
-import '../../elements/gesture';
-import { PanEventDetail, PinchEventDetail, RotateEventDetail, SwipeEventDetail } from '../../elements/gesture';
-import '../elements/layout';
-import './canvas';
-
-@customElement('app-root')
-export class AppRoot extends GemElement {
-  @refobject gestureRef: RefObject<any>;
-  state = {
-    x: 0,
-    y: 0,
-    duration: 0,
-    scale: 1,
-    rotate: 0,
-    swipe: '',
-    moves: [],
-  };
-  onPan = (evt: CustomEvent<PanEventDetail>) => {
-    const { detail } = evt;
-    const { x, y } = this.state;
-    this.setState({ x: detail.x + x, y: detail.y + y, duration: 0 });
-  };
-  onPinch = (evt: CustomEvent<PinchEventDetail>) => {
-    this.setState({ scale: evt.detail.scale * this.state.scale });
-  };
-  onRotate = (evt: CustomEvent<RotateEventDetail>) => {
-    this.setState({ rotate: evt.detail.rotate + this.state.rotate });
-  };
-  onSwipe = (e: CustomEvent<SwipeEventDetail>) => {
-    this.setState({ swipe: `${e.detail.direction}, speed: ${e.detail.speed}` });
-  };
-  onEnd = () => {
-    this.setState({
-      x: 0,
-      y: 0,
-      duration: 0.5,
-      scale: 1,
-      rotate: 0,
-      swipe: '',
-      moves: [...this.gestureRef.element.movesMap.values().next().value],
-    });
-  };
-  render() {
-    const { x, y, scale, rotate, duration, swipe, moves } = this.state;
-    return html`
-      <style>
-        img {
-          translate: ${x}px ${y}px;
-          scale: ${scale};
-          rotate: ${rotate}deg;
-          transition: all ${duration}s;
-        }
-      </style>
-      <gem-gesture
-        ref=${this.gestureRef.ref}
-        @pan=${this.onPan}
-        @end=${this.onEnd}
-        @pinch=${this.onPinch}
-        @rotate=${this.onRotate}
-        @press=${console.log}
-        @swipe=${this.onSwipe}
-        touch-action="pan-y"
-      >
-        <gem-gesture
-          @pan=${console.log}
-          @end=${console.log}
-          @pinch=${console.log}
-          @rotate=${console.log}
-          @press=${console.log}
-          @swipe=${console.log}
-          touch-action="pan-y"
-        >
-          <img src="https://gem-book.js.org/logo.png" width="200" />
-        </gem-gesture>
-        <div>${moves[moves.length - 1] ? `${JSON.stringify(moves[moves.length - 1])}` : ''}</div>
-        <div>${swipe}</div>
-        <app-canvas .data=${moves}></app-canvas>
-      </gem-gesture>
-    `;
-  }
-}
-
-render(
-  html`
-    <style>
-      body {
-        overscroll-behavior: contain;
-      }
-    </style>
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/gesture/manifest.json

@@ -1,3 +0,0 @@
-{
-  "desc": ""
-}

package/src/examples/hash/index.ts

@@ -1,55 +0,0 @@
-import { GemElement, render, html } from '../../';
-import '../../elements/link';
-
-import '../elements/layout';
-
-class Article extends GemElement {
-  constructor() {
-    super();
-    window.addEventListener('hashchange', this.checkHash);
-  }
-
-  mounted = () => {
-    // 在当前页面刷新浏览器会保留滚动位置
-    // 开新窗口测试带 hash 链接
-    this.checkHash();
-  };
-
-  unmounted = () => {
-    window.removeEventListener('hashchange', this.checkHash);
-  };
-
-  checkHash = () => {
-    if (this.id === location.hash.substr(1)) {
-      this.scrollIntoView();
-    }
-  };
-
-  render() {
-    return html`<div style="height: 1000px"><slot></slot></div>`;
-  }
-}
-customElements.define('app-article', Article);
-
-class App extends GemElement {
-  render() {
-    return html`
-      <a href="#article-1">${'<a href="#article-1">'}</a>
-      <a href="#article-2">${'<a href="#article-2">'}</a>
-      <gem-link path="/" hash="#article-1"><button>go #article-1</button></gem-link>
-      <gem-link path="/" hash="#article-2"><button>go #article-2</button></gem-link>
-      <app-article id="article-1" style="display: block; margin-top: 100px;">article-1</app-article>
-      <app-article id="article-2" style="display: block; margin-top: 100px;">article-2</app-article>
-    `;
-  }
-}
-customElements.define('app-root', App);
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/i18n/index.ts

@@ -1,63 +0,0 @@
-import { GemElement, html, connectStore, customElement, render } from '../../';
-
-import '../elements/layout';
-
-import { I18n } from '../../helper/i18n';
-
-const en = {
-  title: 'This is I18n',
-  hello: 'Hello, $1! $2=> $1, Hello!',
-  detail: 'See $1<detail>, $1<detail2>',
-};
-const i18n = new I18n<typeof en>({
-  cache: true,
-  fallbackLanguage: 'en',
-  resources: {
-    en,
-    de: {
-      title: 'Das ist I18n',
-    },
-    zh: 'data:text/plain;base64,eyJ0aXRsZSI6Iui/meaYr0kxOG4ifQ==',
-  },
-  onChange: console.log,
-});
-
-const i18nModule = i18n.createSubModule<typeof en>('test', {
-  en,
-  de: {
-    title: 'Das ist I18n',
-  },
-  zh: 'data:text/plain;base64,eyJ0aXRsZSI6Iui/meaYr0kxOG4ifQ==',
-});
-
-@connectStore(i18n.store)
-@connectStore(i18nModule.store)
-@customElement('app-root')
-export class App extends GemElement {
-  render() {
-    return html`
-      <button @click=${() => i18n.setLanguage('de')}>de</button>
-      <button @click=${() => i18n.setLanguage('zh')}>zh</button>
-      <button @click=${() => i18n.setLanguage('en')}>en</button>
-      <button @click=${() => i18n.resetLanguage()}>reset</button>
-      <p>Current language: ${i18n.currentLanguage}</p>
-      <p>${i18n.get('title')}</p>
-      <p>${i18n.get('hello', 'World', 'reverse')}</p>
-      <p>${i18n.get('detail', (s) => html`<a href="#">${s}</a>`)}</p>
-
-      <h2>sub module</h2>
-      <p>${i18nModule.get('title')}</p>
-      <p>${i18nModule.get('hello', 'World', 'reverse')}</p>
-      <p>${i18nModule.get('detail', (s) => html`<a href="#">${s}</a>`)}</p>
-    `;
-  }
-}
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/index/index.ts

@@ -1,33 +0,0 @@
-import { render, GemElement, createStore, updateStore, html } from '../../';
-import { connectStore, customElement } from '../../lib/decorators';
-
-import '../elements/layout';
-
-// 新建全局数据对象
-const store = createStore({
-  a: 1,
-});
-
-// 定义自定义元素
-@customElement('app-root')
-@connectStore(store)
-export class HelloWorld extends GemElement {
-  clickHandle = () => {
-    updateStore(store, { a: ++store.a });
-  };
-  render() {
-    return html`
-      <button @click="${this.clickHandle}">Hello, World</button>
-      <div>store.a: ${store.a}</div>
-    `;
-  }
-}
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/index/manifest.json

@@ -1,5 +0,0 @@
-{
-  "order": -1,
-  "name": "hello world",
-  "desc": ""
-}

package/src/examples/light-dom/index.ts

@@ -1,31 +0,0 @@
-import { GemElement, html, render } from '../../';
-
-import '../elements/layout';
-
-export class App extends GemElement {
-  state = { now: 0 };
-  constructor() {
-    super({ isLight: true });
-    setInterval(() => {
-      this.setState({ now: Date.now() });
-    }, 1000);
-  }
-
-  render() {
-    return html`
-      <div>hello world!</div>
-      <time>${this.state.now}</time>
-    `;
-  }
-}
-
-customElements.define('app-root', App);
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/multi-page/api.ts

@@ -1,9 +0,0 @@
-import { updateStore } from '../../';
-import store from './store';
-
-export default {
-  async getData() {
-    const text = await new Promise<string>((res) => setTimeout(() => res('pageA async data'), 1000));
-    updateStore(store.pageA, { text });
-  },
-};

package/src/examples/multi-page/index.ts

@@ -1,78 +0,0 @@
-import { GemElement, html, render } from '../../';
-import { GemTitleElement } from '../../elements/title';
-import '../../elements/route';
-import '../../elements/link';
-
-import '../elements/layout';
-
-import './page-b';
-import './page-c';
-
-const routes = [
-  {
-    pattern: '/',
-    redirect: '/c/e',
-  },
-  {
-    title: 'Page A Title',
-    pattern: '/a',
-    get content() {
-      import('./page-a');
-      return html`<app-page-a>A: </app-page-a>`;
-    },
-  },
-  {
-    title: 'Page B Title',
-    pattern: '/B',
-    content: html` <app-page-b>B: </app-page-b> `,
-  },
-  {
-    title: 'Page C Title',
-    pattern: '/c/*',
-    content: html`<app-page-c>C: </app-page-c>`,
-  },
-  {
-    pattern: '/',
-    content: html`<div>hello</div>`,
-  },
-];
-
-class App extends GemElement {
-  render() {
-    return html`
-      <style>
-        :host {
-          text-align: center;
-        }
-        gem-link {
-          cursor: pointer;
-        }
-        gem-link + gem-link {
-          margin-left: 0.5em;
-        }
-        gem-link:hover {
-          text-decoration: underline;
-        }
-      </style>
-      <header><gem-title suffix=${GemTitleElement.defaultSuffix}>AppName</gem-title></header>
-      <nav>
-        <gem-link path="/">Home</gem-link>
-        <gem-link path="/A">PageA</gem-link>
-        <gem-link path="/b">PageB</gem-link>
-        <gem-link path="/c/e" pattern="/c/*">PageC</gem-link>
-      </nav>
-      <main><gem-light-route .routes=${routes}></gem-light-route></main>
-    `;
-  }
-}
-
-customElements.define('app-root', App);
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/multi-page/page-a.ts

@@ -1,16 +0,0 @@
-import { GemElement, html } from '../../';
-import storeSet from './store';
-import api from './api';
-
-customElements.define(
-  'app-page-a',
-  class extends GemElement {
-    static observedStores = [storeSet.pageA];
-    mounted() {
-      api.getData();
-    }
-    render() {
-      return html`<slot></slot> ${storeSet.pageA.text}`;
-    }
-  },
-);

package/src/examples/multi-page/page-b.ts

@@ -1,12 +0,0 @@
-import { GemElement, html } from '../../';
-import storeSet from './store';
-
-customElements.define(
-  'app-page-b',
-  class extends GemElement {
-    static observedStores = [storeSet.pageB];
-    render() {
-      return html`<slot></slot> ${storeSet.pageB.text}`;
-    }
-  },
-);

package/src/examples/multi-page/page-c.ts

@@ -1,40 +0,0 @@
-import { GemElement, html } from '../../';
-import '../../elements/route';
-import '../../elements/link';
-
-const routes = [
-  {
-    title: 'ccccccd',
-    pattern: '/c/d',
-    content: html`<div>C/D</div>`,
-  },
-  {
-    // `title` 未设置会使用父路由标题
-    pattern: '/c/e',
-    content: html`<div>C/E</div>`,
-  },
-  {
-    pattern: '/c/*',
-    content: html`<div>C/E</div>`,
-  },
-];
-
-customElements.define(
-  'app-page-c',
-  class extends GemElement {
-    render() {
-      return html`
-        <style>
-          gem-link + gem-link {
-            margin-left: 0.5em;
-          }
-        </style>
-        <gem-link path="./d">Page c/d</gem-link>
-        <gem-link path="./e">Page c/e</gem-link>
-        <gem-route .routes=${routes}></gem-route>
-        inert route:
-        <gem-route ?inert=${true} .routes=${routes}></gem-route>
-      `;
-    }
-  },
-);

package/src/examples/multi-page/store.ts

@@ -1,10 +0,0 @@
-import { createStoreSet } from '../../';
-
-export default createStoreSet({
-  pageA: {
-    text: 'this is page A',
-  },
-  pageB: {
-    text: 'this is page B',
-  },
-});

package/src/examples/perf-demo/index.ts

@@ -1,136 +0,0 @@
-import { raw, GemElement, createStore, updateStore, html } from '../../';
-
-const store = createStore({
-  number: 1,
-});
-
-setInterval(() => {
-  updateStore(store, { number: (store.number % 10) + 1 });
-}, 1000);
-
-customElements.define(
-  'fiber-dot',
-  class extends GemElement {
-    static observedStores = [store];
-    constructor() {
-      super({ isAsync: true });
-    }
-
-    onmouseenter = () => {
-      this.setState({ hover: true });
-    };
-    onmouseleave = () => {
-      this.setState({ hover: false });
-    };
-
-    size: number;
-    x: number;
-    y: number;
-
-    state = { hover: false };
-
-    render() {
-      const s = this.size * 1.3;
-      Object.assign(this.style, {
-        width: s + 'px',
-        height: s + 'px',
-        left: this.x + 'px',
-        top: this.y + 'px',
-        borderRadius: s / 2 + 'px',
-        lineHeight: s + 'px',
-        background: this.state.hover ? '#ff0' : '#61dafb',
-      });
-      return html`
-        <style>
-          :host {
-            position: absolute;
-            font: normal 15px sans-serif;
-            text-align: center;
-            cursor: pointer;
-            display: block;
-          }
-        </style>
-        ${this.state.hover ? '**' + store.number + '**' : store.number}
-      `;
-    }
-  },
-);
-
-const targetSize = 25;
-customElements.define(
-  'fiber-triangle',
-  class extends GemElement {
-    x: number;
-    y: number;
-    s: number;
-    seconds: number;
-
-    render() {
-      let s = this.s;
-      if (s <= targetSize) {
-        return html`
-          <fiber-dot .x=${this.x - targetSize / 2} .y=${this.y - targetSize / 2} .size=${targetSize}></fiber-dot>
-        `;
-      }
-      s = s / 2;
-
-      const slowDown = true;
-      if (slowDown) {
-        const e = performance.now() + 0.8;
-        while (performance.now() < e) {
-          // Artificially long execution time.
-        }
-      }
-      return html`
-        <fiber-triangle .x=${this.x} .y=${this.y - s / 2} .s=${s}></fiber-triangle>
-        <fiber-triangle .x=${this.x - s} .y=${this.y + s / 2} .s=${s}></fiber-triangle>
-        <fiber-triangle .x=${this.x + s} .y=${this.y + s / 2} .s=${s}></fiber-triangle>
-      `;
-    }
-  },
-);
-
-class App extends GemElement {
-  static observedPropertys = ['elapsed'];
-  elapsed = 0;
-  render() {
-    const elapsed = this.elapsed;
-    const t = (elapsed / 1000) % 10;
-    const scale = 1 + (t > 5 ? 10 - t : t) / 10;
-    this.style.transform = 'scaleX(' + scale / 2.1 + ') scaleY(0.7) translateZ(0.1px)';
-    return html`
-      <style>
-        :host {
-          position: absolute;
-          transform-origin: 0 0;
-          left: 50%;
-          top: 50%;
-          width: 10px;
-          height: 10px;
-          background: #eee;
-        }
-      </style>
-      <div>
-        <fiber-triangle .x=${0} .y=${0} .s=${1000}></fiber-triangle>
-      </div>
-    `;
-  }
-}
-customElements.define('app-root', App);
-
-document.body.innerHTML = raw`
-  <ul>
-    <li><a href="https://stencil-fiber-demo.firebaseapp.com/perf.html">stencil-fiber-demo</a></li>
-    <li><a href="https://claudiopro.github.io/react-fiber-vs-stack-demo/fiber.html">react-fiber-demo</a></li>
-  </ul>
-`;
-
-const app = new App();
-document.body.append(app);
-
-const start = Date.now();
-function update() {
-  app.elapsed = Date.now() - start;
-  requestAnimationFrame(update);
-}
-requestAnimationFrame(update);