@mantou/gem 1.6.3 → 1.6.9

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);

package/src/examples/ref-route/index.ts

@@ -1,109 +0,0 @@
-import { GemElement, html, history, render } from '../../';
-import { connectStore, customElement, RefObject, refobject } from '../../lib/decorators';
-import { createHistoryParams, GemRouteElement, RouteItem } from '../../elements/route';
-import '../../elements/link';
-
-import '../elements/layout';
-
-const homeRoute: RouteItem = {
-  pattern: '/',
-  async getContent(params) {
-    await new Promise((res) => setTimeout(res, 1000));
-    return html`<route-home .params=${params}></route-home>`;
-  },
-};
-
-const aRoute: RouteItem = {
-  pattern: '/a/:b',
-  async getContent() {
-    await new Promise((res) => setTimeout(res, 1000));
-    return html`<route-a></route-a>`;
-  },
-};
-
-const routes = {
-  home: homeRoute,
-  a: aRoute,
-};
-
-const locationStore = GemRouteElement.createLocationStore();
-
-@customElement('route-home')
-export class RouteHome extends GemElement {
-  params: Record<string, string>;
-  render = () => {
-    return html`
-      <style>
-        gem-active-link {
-          display: block;
-        }
-        gem-active-link:where(:--active, [data-active]) {
-          color: inherit;
-        }
-      </style>
-      current route: home page, current params: ${JSON.stringify(this.params)}, click navigation to /a page
-      <gem-active-link .route=${routes.a} .options=${{ params: { b: 1 } }}>
-        a page link, params: {a: 1}
-      </gem-active-link>
-    `;
-  };
-}
-
-@connectStore(locationStore)
-@customElement('route-a')
-export class RouteA extends GemElement {
-  render = () => {
-    return html`
-      <style>
-        gem-active-link {
-          display: block;
-        }
-        gem-active-link:where(:--active, [data-active]) {
-          color: inherit;
-        }
-      </style>
-      current route: /a/:b, current params: ${JSON.stringify(locationStore.params)}, click navigation to home page,
-      cuurent query: ${history.getParams().query.toString()}
-      <gem-active-link .route=${routes.a} .options=${{ params: { b: 1 }, query: '?a=1' }}>
-        a page link, query: ?a=1
-      </gem-active-link>
-    `;
-  };
-}
-
-@customElement('app-root')
-@connectStore(locationStore)
-export class App extends GemElement {
-  @refobject routeRef: RefObject<GemRouteElement>;
-  onclick = () => {
-    if (this.routeRef.element?.currentRoute === routes.home) {
-      history.push(createHistoryParams(routes.a, { params: { b: String(Date.now()) } }));
-    } else {
-      history.push(createHistoryParams(routes.home));
-    }
-  };
-  render() {
-    return html`
-      <main>
-        <pre>${JSON.stringify(locationStore.params)}</pre>
-        <gem-route
-          ref=${this.routeRef.ref}
-          @loading=${console.log}
-          @route-change=${console.log}
-          @error=${console.error}
-          .routes=${routes}
-          .locationStore=${locationStore}
-        ></gem-route>
-      </main>
-    `;
-  }
-}
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/reflect/index.ts

@@ -1,61 +0,0 @@
-import { html, randomStr, GemElement, customElement, render, refobject, RefObject } from '../..';
-
-import '../../elements/reflect';
-
-import '../elements/layout';
-@customElement('app-children')
-export class AppChild extends GemElement {
-  mounted = () => console.log('mounted');
-}
-
-@customElement('app-root')
-export class App extends GemElement {
-  @refobject childrenRef: RefObject<HTMLStyleElement>;
-  state = {
-    mount: true,
-  };
-
-  mounted() {
-    document.addEventListener('click', this.update);
-  }
-
-  updated() {
-    console.trace('updated', this.childrenRef.element);
-  }
-
-  render() {
-    return html`
-      <button @click=${() => this.setState({ mount: true })}>mount</button>
-      <button @click=${() => this.setState({ mount: false })}>unmount</button>
-      ${this.state.mount
-        ? html`
-            <gem-reflect>
-              <app-children ref=${this.childrenRef.ref}></app-children>
-              <style>
-                head {
-                  display: block;
-                }
-                head::before {
-                  content: '<head>';
-                }
-                head::after {
-                  content: '</head>';
-                }
-              </style>
-              <div>${randomStr()}</div>
-              <div>${randomStr()}</div>
-            </gem-reflect>
-          `
-        : null}
-    `;
-  }
-}
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/styled/index.ts

@@ -1,39 +0,0 @@
-import { GemElement, html, styled, createCSSSheet, render } from '../../';
-
-import '../elements/layout';
-
-const styles = createCSSSheet({
-  h1: styled.class`
-    color: yellow;
-    &:hover {
-      color: red;
-    }
-  `,
-  h2: styled.id`
-    background: yellow;
-    &:hover {
-      background: red;
-    }
-  `,
-});
-
-class App extends GemElement {
-  static adoptedStyleSheets = [styles];
-  render() {
-    return html`
-      <h1 class=${styles.h1}>Header 1</h1>
-      <h2 id=${styles.h2}>Header 2</h2>
-    `;
-  }
-}
-
-customElements.define('app-root', App);
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/svg-icon/index.ts

@@ -1,31 +0,0 @@
-import { html, render, raw } from '../../';
-
-import '../../elements/use';
-
-import '../elements/layout';
-
-const app = html`
-  <div slot="main">
-    <template id="icon">
-      <svg width="24" height="24" viewBox="0 0 24 24">
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
-      </svg>
-    </template>
-    <gem-use .root=${document.body} selector="#icon"></gem-use>
-    <gem-use selector="#icon"></gem-use>
-    <gem-use
-      .element=${raw`
-        <svg height="24px" viewBox="0 0 24 24" width="24px">
-          <path d="M0 0h24v24H0z" fill="none"/>
-          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
-        </svg>
-      `}
-      style="fill: red; height: 1.2em; gap: 0.3em"
-    >
-      English
-    </gem-use>
-  </div>
-`;
-
-render(html`<gem-examples-layout>${app}</gem-examples-layout>`, document.body);

package/src/examples/theme/index.ts

@@ -1,56 +0,0 @@
-import { GemElement, html, render, customElement, connectStore } from '../../';
-import { createTheme, getThemeStore, updateTheme } from '../../helper/theme';
-import { mediaQuery } from '../../helper/mediaquery';
-
-import '../elements/layout';
-
-const theme = createTheme({
-  // 支持动态修改不透明度
-  color: '0, 0, 0',
-  primaryColor: '#eee',
-});
-
-const themeStore = getThemeStore(theme);
-
-const printTheme = createTheme({
-  primaryColor: 'yellow',
-});
-
-document.onclick = () => {
-  updateTheme(theme, {
-    primaryColor: Math.random() > 0.5 ? 'red' : 'blue',
-  });
-  updateTheme(printTheme, {
-    primaryColor: Math.random() > 0.5 ? 'gray' : 'white',
-  });
-};
-
-@customElement('app-root')
-@connectStore(themeStore)
-export class App extends GemElement {
-  render() {
-    return html`
-      <style>
-        div {
-          color: rgba(${theme.color}, 0.5);
-          border: 2px solid ${theme.primaryColor};
-        }
-        @media ${mediaQuery.PRINT} {
-          div {
-            border: 2px solid ${printTheme.primaryColor};
-          }
-        }
-      </style>
-      <div>color: ${themeStore.primaryColor}</div>
-    `;
-  }
-}
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/unsafe/index.ts

@@ -1,29 +0,0 @@
-import { html, render } from '../../';
-
-import '../../elements/unsafe';
-
-import '../elements/layout';
-
-const svgStr = `
-  <svg width="24" height="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
-  </svg>
-`;
-const svgStyle = `
-  svg {
-    transform: scale(2);
-  }
-`;
-const htmlStr = `
-  <pre><code>// code code code</code></pre>
-`;
-
-const app = html`
-  <div slot="main">
-    <gem-unsafe content="${svgStr}" contentcss="${svgStyle}"></gem-unsafe>
-    <gem-unsafe content="${htmlStr}"></gem-unsafe>
-  </div>
-`;
-
-render(html`<gem-examples-layout>${app}</gem-examples-layout>`, document.body);

package/umd.d.ts

@@ -1,18 +0,0 @@
-/**
- * 自定义元素不应该重复定义，gem 不应该重复引入
- * 包含所有资产，导出到全局变量 `Gem`，以便供 webpack 的 `externals` 使用
- */
-export * from './elements/link';
-export * from './elements/route';
-export * from './elements/title';
-export * from './elements/use';
-export * from './elements/unsafe';
-export * from './elements/reflect';
-export * from './elements/modal-base';
-export * from './elements/dialog-base';
-export * from './helper/theme';
-export * from './helper/i18n';
-export * from './helper/request';
-export * from './helper/mediaquery';
-export * from './';
-//# sourceMappingURL=umd.d.ts.map

package/umd.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"umd.d.ts","sourceRoot":"","sources":["src/umd.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,IAAI,CAAC"}