Closed #137

packages/gem-book/src/element/elements/404.ts

@@ -1,4 +1,4 @@
-import { connectStore, customElement, GemElement, html } from '@mantou/gem';
+import { customElement, GemElement, html } from '@mantou/gem';
 
 import { getGithubPath } from '../lib/utils';
 import { bookStore, locationStore } from '../store';
@@ -9,9 +9,9 @@ import { icons } from './icons';
 
 import '@mantou/gem/elements/reflect';
 import '@mantou/gem/elements/title';
+import '@mantou/gem/elements/use';
 
 @customElement('gem-book-404')
-@connectStore(selfI18n.store)
 export class Meta extends GemElement {
   #getMdFullPath = () => {
     const { links = [] } = bookStore;

packages/gem-book/src/element/elements/edit-link.ts

@@ -25,7 +25,6 @@ const fetchData = async (api: string) => {
 };
 
 @customElement('gem-book-edit-link')
-@connectStore(selfI18n.store)
 @connectStore(locationStore)
 export class EditLink extends GemElement<State> {
   state = {

packages/gem-book/src/element/elements/footer.ts

@@ -8,7 +8,6 @@ import { unsafeRenderHTML } from '../lib/renderer';
 import '@mantou/gem/elements/link';
 
 @customElement('gem-book-footer')
-@connectStore(selfI18n.store)
 @connectStore(bookStore)
 export class Footer extends GemElement {
   render() {

packages/gem-examples/src/elements/nav.ts

@@ -61,7 +61,7 @@ export class Nav extends GemElement {
         <div class="version">version: ${version}</div>
       </a>
       <ol>
-        ${EXAMPLES.sort((a, b) => ((METADATA[a].order || 0) > (METADATA[b].order || 0) ? 1 : -1)).map(
+        ${EXAMPLES.sort((a, b) => (METADATA[a].order || 0) - (METADATA[b].order || 0)).map(
           (name) => html`
             <li>
               <a class=${location.pathname.includes(name) ? 'active' : ''} href=${getGitPageUrl(name)}>

packages/gem-examples/src/i18n/index.ts

@@ -1,4 +1,4 @@
-import { GemElement, html, connectStore, customElement, render } from '@mantou/gem';
+import { GemElement, html, customElement, render } from '@mantou/gem';
 import { I18n } from '@mantou/gem/helper/i18n';
 import type { RouteItem } from 'duoyun-ui/elements/route';
 
@@ -52,8 +52,6 @@ const localizeRoutes: RouteItem[] = [
   },
 ];
 
-@connectStore(i18n.store)
-@connectStore(i18nModule.store)
 @customElement('app-root')
 export class App extends GemElement {
   render() {

packages/gem/docs/en/001-guide/002-advance/001-icon.md

@@ -1,7 +1,7 @@
 # Use SVG icons
 
-GEM uses [ShadowDom](https://developer.mozilla.org/en-s/docs/web_components/usion_shadow_dom) to prevent style conflict,
-but it also makes [SVG Sprite](https://css-tricks.com/svg-sprites-use-better-icon-fonts/) can't work, SVG `href` cannot penetrate the ShadowDom boundary.
+Gem uses [ShadowDOM](https://developer.mozilla.org/en-s/docs/web_components/usion_shadow_dom) to prevent style conflict,
+but it also makes [SVG Sprite](https://css-tricks.com/svg-sprites-use-better-icon-fonts/) can't work, SVG `href` cannot penetrate the ShadowDOM boundary.
 Therefore, Gem has a built-in element `<gem-use>` to replace SVG Sprite:
 
 <gbp-sandpack dependencies="@mantou/gem">
@@ -26,8 +26,8 @@ render(
         <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 .root=${document.body} selector="#icon"></gem-use>
     <gem-use .element=${icon}></gem-use>
   `,
   document.getElementById('root'),
@@ -37,3 +37,12 @@ render(
 </gbp-sandpack>
 
 > [!NOTE] `<gem-use>` since the content is copied for rendering, the update of `<svg>` cannot update the original `<gem-use>` instance
+
+There are many open source icon libraries that can be used directly in your projects:
+
+- [Lucide](https://lucide.dev/)
+- [Radix](https://github.com/radix-ui/icons)
+- [Feather](https://github.com/feathericons/feather)
+- [Fluent](https://github.com/microsoft/fluentui-system-icons)
+- [Material](https://material.io/resources/icons)
+- [Tabler](http://tablericons.com/)

packages/gem/docs/en/001-guide/002-advance/005-i18n.md

@@ -27,10 +27,9 @@ When instantiating the `I18n` object, the appropriate language is automatically
 > [!TIP]
 > It is recommended to use [Crowdin](https://crowdin.com/), [Pontoon](https://github.com/mozilla/pontoon/) similar services to maintain your language pack
 
-You can directly use `i18n.get('title')` in the element to read the value in the language pack, but you need to connect the `Store` object of the language pack to update the element when the content of the language pack changes.
+You can directly use `i18n.get('title')` in the element to read the value in the language pack.
 
-```js 1
-@connectStore(i18n.store)
+```js
 @customElement('app-root')
 class App extends GemElement {
   render() {

packages/gem/docs/en/001-guide/README.md

@@ -1,6 +1,6 @@
 # Introduction
 
-Gem is a lightweight library that uses modern WebComponents technology to build WebApp. Essentially, you just create individual custom elements and let them work together. They are very flexible and can be easily extended, such as integrated gestures. In addition to building WebApps, you can also use GEM to publish custom elements that can work independently(e.g [GemPanel](https://panel.gemjs.org/)). Custom elements can be easily used in other libraries, Therefore, Gem is also particularly suitable for building a UI component library(e.g [DuoyunUI](https://duoyun-ui.gemjs.org)).
+Gem is a lightweight library that uses modern WebComponents technology to build WebApp. Essentially, you just create individual custom elements and let them work together. They are very flexible and can be easily extended, such as integrated gestures. In addition to building WebApps, you can also use Gem to publish custom elements that can work independently(e.g [GemPanel](https://panel.gemjs.org/)). Custom elements can be easily used in other libraries, Therefore, Gem is also particularly suitable for building a UI component library(e.g [DuoyunUI](https://duoyun-ui.gemjs.org)).
 
 Before learning Gem, Hope you have a certain understanding of [WebComponents](https://developer.mozilla.org/en-US/docs/Web/Web_Components) technology.
 

packages/gem/docs/zh/001-guide/002-advance/001-icon.md

@@ -25,8 +25,8 @@ render(
         <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 .root=${document.body} selector="#icon"></gem-use>
     <gem-use .element=${icon}></gem-use>
   `,
   document.getElementById('root'),
@@ -36,3 +36,12 @@ render(
 </gbp-sandpack>
 
 > [!NOTE] `<gem-use>` 由于是复制内容进行渲染，所以 `<svg>` 更新不能同步更新原先的 `<gem-use>` 实例
+
+有许多开源图标库可以直接在你的项目中使用：
+
+- [Lucide](https://lucide.dev/)
+- [Radix](https://github.com/radix-ui/icons)
+- [Feather](https://github.com/feathericons/feather)
+- [Fluent](https://github.com/microsoft/fluentui-system-icons)
+- [Material](https://material.io/resources/icons)
+- [Tabler](http://tablericons.com/)

packages/gem/docs/zh/001-guide/002-advance/005-i18n.md

@@ -27,10 +27,9 @@ console.log(i18n.get('title'));
 > [!TIP]
 > 建议使用 [Crowdin](https://crowdin.com/)，[Pontoon](https://github.com/mozilla/pontoon/) 类似的服务来维护你的语言包
 
-在元素中可以直接使用 `i18n.get('title')` 来读取语言包中的值，但是需要连接语言包的 `Store` 对象，以便语言包内容发生变化时更新元素。
+在元素中可以直接使用 `i18n.get('title')` 来读取语言包中的值。
 
-```js 1
-@connectStore(i18n.store)
+```js
 @customElement('app-root')
 class App extends GemElement {
   render() {

packages/gem/src/elements/base/route.ts

@@ -125,7 +125,7 @@ type State = {
 };
 
 export type RouteTrigger = {
-  store: Store<any>;
+  store?: Store<any>;
   replace: (arg: UpdateHistoryParams) => void;
   getParams: () => { path: string; query?: string | QueryString; hash?: string };
 };

packages/gem/src/helper/i18n.ts

@@ -1,4 +1,4 @@
-import { createStore, updateStore, Store } from '../lib/store';
+import { UpdateHistoryParams } from '../lib/history';
 import { html, TemplateResult } from '../lib/element';
 import { GemError } from '../lib/utils';
 import type { RouteTrigger } from '../elements/base/route';
@@ -72,10 +72,8 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
   urlParamsName?: string;
   onChange?: (currentLanguage: string) => void;
 
-  store: Store<any>;
-
   // 兼容 `<gem-route>`
-  replace = ({ path }: { path: string }) => this.setLanguage(path);
+  replace = ({ path }: UpdateHistoryParams) => this.setLanguage(path!);
   getParams = () => ({ path: this.currentLanguage });
 
   get #cacheCurrentKey() {
@@ -119,7 +117,6 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
       throw new GemError('i18n: fallbackLanguage invalid');
     }
 
-    this.store = createStore(this as any);
     Object.assign<I18n<T>, I18nOptions<T>>(this as I18n<T>, options);
 
     let currentLanguage = this.#urlParamsLang || this.currentLanguage || this.#cacheLang;
@@ -208,7 +205,17 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
       pack = data;
     }
     this.resources[lang] = pack;
-    updateStore(this.store);
+
+    // update all element
+    const temp: Element[] = [document.documentElement];
+    while (!!temp.length) {
+      const element = temp.pop()!;
+      if ('attributeChangedCallback' in element) (element as any).attributeChangedCallback();
+      if (element.shadowRoot?.firstElementChild) temp.push(element.shadowRoot.firstElementChild);
+      if (element.firstElementChild) temp.push(element.firstElementChild);
+      if (element.nextElementSibling) temp.push(element.nextElementSibling);
+    }
+
     if (lang !== this.currentLanguage) {
       this.#lang = lang;
     }
@@ -251,8 +258,6 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
   }
 
   /**
-   * prepare: @connectStore(i18n.store)
-   *
    * @example
    *
    * html`