@lynx-js/web-elements 0.7.1 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @lynx-js/web-elements
 
+## 0.7.2
+
+### Patch Changes
+
+- refactor: split shadowroot templates into a package ([#811](https://github.com/lynx-family/lynx-stack/pull/811))
+
+  We're going to implement Lynx Web Platform's SSR based on the `shadowrootmode`.
+
+  `https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/shadowRootMode`
+
+  (chrome 111, firefox 123, safari 16.4)
+
+  This means those modern browsers are able to show the correct layout before the web components are defined.
+
+  To make this work, we have to split the shadowroot template string into a new package `@lynx-js/web-elements-template`.
+
+  No features affected.
+
+- Updated dependencies [[`ae9652a`](https://github.com/lynx-family/lynx-stack/commit/ae9652a7a1d6247959bb41e7d76793300eddb741), [`ae9652a`](https://github.com/lynx-family/lynx-stack/commit/ae9652a7a1d6247959bb41e7d76793300eddb741)]:
+  - @lynx-js/web-elements-template@0.7.2
+  - @lynx-js/web-elements-reactive@0.2.2
+
 ## 0.7.1
 
 ### Patch Changes

package/dist/ScrollView/ScrollView.js

@@ -9,8 +9,9 @@ import { FadeEdgeLengthAttribute } from './FadeEdgeLengthAttribute.js';
 import { ScrollAttributes } from './ScrollAttributes.js';
 import { ScrollViewEvents } from './ScrollViewEvents.js';
 import { ScrollIntoView } from './ScrollIntoView.js';
-import { Component, html } from '@lynx-js/web-elements-reactive';
+import { Component } from '@lynx-js/web-elements-reactive';
 import { scrollContainerDom } from '../common/constants.js';
+import { templateScrollView } from '@lynx-js/web-elements-template';
 let ScrollView = (() => {
     let _classDecorators = [Component('scroll-view', [
             CommonEventsAndMethods,
@@ -18,89 +19,7 @@ let ScrollView = (() => {
             FadeEdgeLengthAttribute,
             ScrollViewEvents,
             ScrollIntoView,
-        ], html ` <style>
-      .placeholder-dom {
-        display: none;
-        flex: 0 0 0;
-        align-self: stretch;
-        min-height: 0;
-        min-width: 0;
-      }
-      .mask {
-        z-index: 1;
-        position: sticky;
-      }
-      .observer-container {
-        flex-direction: inherit;
-        overflow: visible;
-      }
-      .observer {
-        display: flex;
-      }
-      ::-webkit-scrollbar {
-        display: none;
-      }
-
-      @keyframes topFading {
-        0% {
-          box-shadow: transparent 0px 0px 0px 0px;
-        }
-        5% {
-          box-shadow: var(--scroll-view-bg-color) 0px 0px
-            var(--scroll-view-fading-edge-length)
-            var(--scroll-view-fading-edge-length);
-        }
-        100% {
-          box-shadow: var(--scroll-view-bg-color) 0px 0px
-            var(--scroll-view-fading-edge-length)
-            var(--scroll-view-fading-edge-length);
-        }
-      }
-      @keyframes botFading {
-        0% {
-          box-shadow: var(--scroll-view-bg-color) 0px 0px
-            var(--scroll-view-fading-edge-length)
-            var(--scroll-view-fading-edge-length);
-        }
-        95% {
-          box-shadow: var(--scroll-view-bg-color) 0px 0px
-            var(--scroll-view-fading-edge-length)
-            var(--scroll-view-fading-edge-length);
-        }
-        100% {
-          box-shadow: transparent 0px 0px 0px 0px;
-        }
-      }
-    </style>
-      <div
-        class="mask placeholder-dom"
-        id="top-fade-mask"
-        part="top-fade-mask"
-      ></div>
-      <div
-        class="observer-container placeholder-dom"
-        part="upper-threshold-observer"
-      >
-        <div
-          class="observer placeholder-dom"
-          id="upper-threshold-observer"
-        ></div>
-      </div>
-      <slot></slot>
-      <div
-        class="observer-container placeholder-dom"
-        part="lower-threshold-observer"
-      >
-        <div
-          class="observer placeholder-dom"
-          id="lower-threshold-observer"
-        ></div>
-      </div>
-      <div
-        class="mask placeholder-dom"
-        id="bot-fade-mask"
-        part="bot-fade-mask"
-      ></div>`)];
+        ], templateScrollView)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XAudioTT/XAudioTT.js

@@ -4,14 +4,15 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, html, genDomGetter, bindToAttribute, } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter, bindToAttribute, } from '@lynx-js/web-elements-reactive';
 import { XAudioAttribute } from './XAudioAttribute.js';
 import { XAudioEvents } from './XAudioEvents.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { XAudioErrorCode, audioPlaybackStateMap, getAudioState, xAudioBlob, xAudioSrc, } from './utils.js';
+import { templateXAudioTT } from '@lynx-js/web-elements-template';
 let XAudioTT = (() => {
-    let _classDecorators = [Component('x-audio-tt', [CommonEventsAndMethods, XAudioAttribute, XAudioEvents], html `<audio id="audio"></audio>`)];
+    let _classDecorators = [Component('x-audio-tt', [CommonEventsAndMethods, XAudioAttribute, XAudioEvents], templateXAudioTT)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XImage/FilterImage.js

@@ -4,13 +4,14 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, html } from '@lynx-js/web-elements-reactive';
+import { Component } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { DropShadow } from './DropShadow.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
+import { templateFilterImage } from '@lynx-js/web-elements-template';
 let FilterImage = (() => {
-    let _classDecorators = [Component('filter-image', [CommonEventsAndMethods, ImageSrc, DropShadow, ImageEvents], html ` <img part="img" alt="" id="img" /> `)];
+    let _classDecorators = [Component('filter-image', [CommonEventsAndMethods, ImageSrc, DropShadow, ImageEvents], templateFilterImage({}))];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XImage/XImage.js

@@ -4,12 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, html } from '@lynx-js/web-elements-reactive';
+import { Component } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
+import { templateXImage } from '@lynx-js/web-elements-template';
 let XImage = (() => {
-    let _classDecorators = [Component('x-image', [CommonEventsAndMethods, ImageSrc, ImageEvents], html ` <img part="img" alt="" id="img" /> `)];
+    let _classDecorators = [Component('x-image', [CommonEventsAndMethods, ImageSrc, ImageEvents], templateXImage({}))];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XInput/XInput.js

@@ -4,12 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
 import { InputBaseAttributes } from './InputBaseAttributes.js';
 import { Placeholder } from './Placeholder.js';
 import { XInputAttribute } from './XInputAttribute.js';
 import { XInputEvents } from './XInputEvents.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { templateXInput } from '@lynx-js/web-elements-template';
 let XInput = (() => {
     let _classDecorators = [Component('x-input', [
             CommonEventsAndMethods,
@@ -17,24 +18,7 @@ let XInput = (() => {
             XInputAttribute,
             InputBaseAttributes,
             XInputEvents,
-        ], html ` <style>
-      #input:focus {
-        outline: none;
-      }
-      #form {
-        display: none;
-      }
-    </style>
-    <form id="form" part="form" method="dialog">
-      <input
-        id="input"
-        part="input"
-        step="any"
-        type="text"
-        inputmode="text"
-        spell-check="true"
-      />
-    </form>`)];
+        ], templateXInput)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XList/XList.js

@@ -4,50 +4,15 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
 import { XListAttributes } from './XListAttributes.js';
 import { XListEvents } from './XListEvents.js';
 import { XListWaterfall } from './XListWaterfall.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { templateXList } from '@lynx-js/web-elements-template';
 let XList = (() => {
-    let _classDecorators = [Component('x-list', [CommonEventsAndMethods, XListAttributes, XListEvents, XListWaterfall], html `<style>
-  .placeholder-dom {
-    display: none;
-    flex: 0 0 0;
-    align-self: stretch;
-    min-height: 0;
-    min-width: 0;
-  }
-  .observer-container {
-    flex-direction: inherit;
-    overflow: visible;
-  }
-  .observer {
-    display: flex;
-  }
-  </style>
-  <div id="content" part="content">
-    <div
-      class="observer-container placeholder-dom"
-      part="upper-threshold-observer"
-    >
-      <div
-        class="observer placeholder-dom"
-        id="upper-threshold-observer"
-      ></div>
-    </div>
-    <slot part="slot"></slot>
-    <div
-      class="observer-container placeholder-dom"
-      part="lower-threshold-observer"
-    >
-      <div
-        class="observer placeholder-dom"
-        id="lower-threshold-observer"
-      ></div>
-    </div>
-  </div>`)];
+    let _classDecorators = [Component('x-list', [CommonEventsAndMethods, XListAttributes, XListEvents, XListWaterfall], templateXList)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XOverlayNg/XOverlayNg.js

@@ -4,27 +4,12 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
+import { templateXOverlayNg } from '@lynx-js/web-elements-template';
 import { layoutChangeTarget, CommonEventsAndMethods, } from '../common/CommonEventsAndMethods.js';
 import { XOverlayAttributes } from './XOverlayAttributes.js';
-import { Component, html } from '@lynx-js/web-elements-reactive';
+import { Component } from '@lynx-js/web-elements-reactive';
 let XOverlayNg = (() => {
-    let _classDecorators = [Component('x-overlay-ng', [CommonEventsAndMethods, XOverlayAttributes], html `
-    <style>
-      #dialog[open] {
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        position: fixed;
-      }
-      #dialog::backdrop {
-        background-color: transparent;
-      }
-    </style>
-    <dialog id="dialog" part="dialog">
-      <slot></slot>
-    </dialog>
-  `)];
+    let _classDecorators = [Component('x-overlay-ng', [CommonEventsAndMethods, XOverlayAttributes], templateXOverlayNg)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XRefreshView/XRefreshView.js

@@ -4,59 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
 import { XRefreshViewEventsEmitter } from './XRefreshViewEventsEmitter.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
+import { templateXRefreshView } from '@lynx-js/web-elements-template';
 let XRefreshView = (() => {
-    let _classDecorators = [Component('x-refresh-view', [CommonEventsAndMethods, XRefreshViewEventsEmitter], html `
-    <style>
-      .bounce-container {
-        overflow: scroll;
-        overscroll-behavior: contain;
-        scroll-snap-type: y mandatory;
-        scroll-behavior: smooth;
-        scrollbar-width: none;
-      }
-      .overflow-placeholder {
-        min-height: 30%;
-        min-width: 100%;
-        flex-shrink: 0;
-        scroll-snap-align: none;
-      }
-      .not-shrink {
-        height: 100%;
-        width: 100%;
-        min-height: 100%;
-        min-width: 100%;
-        flex-shrink: 0;
-      }
-      .vertical {
-        display: flex;
-        flex-direction: column;
-      }
-      #content {
-        scroll-snap-align: center;
-      }
-    </style>
-    <div id="container" part="container" class="bounce-container not-shrink vertical">
-      <div
-        id="placeholder-top"
-        class="overflow-placeholder bounce-item"
-        part="placeholder-top"
-      ></div>
-      <slot name="header"></slot>
-      <div id="content" part="content" class="not-shrink vertical">
-        <slot part="slot"></slot>
-      </div>
-      <slot name="footer"></slot>
-      <div
-        id="placeholder-bot"
-        class="overflow-placeholder bounce-item"
-        part="placeholder-bot"
-      ></div>
-    </div>
-  `)];
+    let _classDecorators = [Component('x-refresh-view', [CommonEventsAndMethods, XRefreshViewEventsEmitter], templateXRefreshView)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XSwiper/XSwiper.js

@@ -4,13 +4,14 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
 import { XSwipeEvents } from './XSwiperEvents.js';
 import { XSwiperAutoScroll } from './XSwiperAutoScroll.js';
 import { XSwiperCircular } from './XSwiperCircular.js';
 import { XSwiperIndicator } from './XSwiperIndicator.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
+import { templateXSwiper } from '@lynx-js/web-elements-template';
 let XSwiper = (() => {
     let _classDecorators = [Component('x-swiper', [
             CommonEventsAndMethods,
@@ -18,53 +19,7 @@ let XSwiper = (() => {
             XSwipeEvents,
             XSwiperCircular,
             XSwiperAutoScroll,
-        ], html ` <style>
-      #bounce-padding {
-        display: none;
-        flex: 0 0 0;
-        align-self: stretch;
-        scroll-snap-align: none;
-        flex-basis: 100%;
-      }
-      #content {
-        position: relative;
-        display: flex;
-        flex: 0 0 100%;
-        flex-direction: inherit;
-        flex-wrap: inherit;
-        align-self: stretch;
-        justify-content: inherit;
-        align-items: inherit;
-        overflow: inherit;
-        scrollbar-width: none;
-        scroll-snap-align: start;
-        scroll-snap-type: inherit;
-      }
-      div::-webkit-scrollbar {
-        display: none;
-      }
-      #indicator-container {
-        display: none;
-      }
-      @keyframes indicator-dot {
-        30%,
-        70% {
-          background-color: var(--indicator-color);
-        }
-        31%,
-        69% {
-          background-color: var(--indicator-active-color);
-        }
-      }
-    </style>
-    <style id="indicator-style"></style>
-    <div id="bounce-padding" part="bounce-padding"></div>
-    <div id="indicator-container" part="indicator-container"></div>
-    <div id="content" part="content">
-      <slot part="slot-start" name="circular-start" id="circular-start"></slot>
-      <slot part="slot"></slot>
-      <slot part="slot-end" name="circular-end" id="circular-end"></slot>
-    </div>`)];
+        ], templateXSwiper)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XText/InlineImage.js

@@ -4,7 +4,8 @@ import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { templateInlineImage } from '@lynx-js/web-elements-template';
 let InlineImageAttributes = (() => {
     let _instanceExtraInitializers = [];
     let _private_handleSrc_decorators;
@@ -35,7 +36,7 @@ export { InlineImageAttributes };
  * @deprecated you can use `x-image` instead in `x-text`.
  */
 let InlineImage = (() => {
-    let _classDecorators = [Component('inline-image', [InlineImageAttributes], html ` <img id="img" part="img" /> `)];
+    let _classDecorators = [Component('inline-image', [InlineImageAttributes], templateInlineImage({}))];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XText/XText.js

@@ -4,12 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, html } from '@lynx-js/web-elements-reactive';
+import { Component } from '@lynx-js/web-elements-reactive';
 import { XTextTruncation } from './XTextTruncation.js';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
 import { CommonEventsAndMethods, layoutChangeTarget, } from '../common/CommonEventsAndMethods.js';
+import { templateXText } from '@lynx-js/web-elements-template';
 let XText = (() => {
-    let _classDecorators = [Component('x-text', [CommonEventsAndMethods, XTextTruncation], html `<div id="inner-box" part="inner-box"><slot part="slot"></slot><slot name="inline-truncation"></slot></div>`)];
+    let _classDecorators = [Component('x-text', [CommonEventsAndMethods, XTextTruncation], templateXText)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XTextarea/XTextarea.js

@@ -4,12 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
 import { Placeholder } from './Placeholder.js';
 import { TextareaBaseAttributes } from './TextareaBaseAttributes.js';
 import { XTextareaAttributes } from './XTextareaAttributes.js';
 import { XTextareaEvents } from './XTextareaEvents.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { templateXTextarea } from '@lynx-js/web-elements-template';
 // x-textarea
 let XTextarea = (() => {
     let _classDecorators = [Component('x-textarea', [
@@ -18,16 +19,7 @@ let XTextarea = (() => {
             TextareaBaseAttributes,
             XTextareaAttributes,
             XTextareaEvents,
-        ], html `<style>
-      #textarea:focus,
-      #textarea:focus-visible {
-        border: inherit;
-        outline: inherit;
-      }
-    </style>
-    <form id="form" part="form" method="dialog">
-      <textarea id="textarea" part="textarea"></textarea>
-    </form> `)];
+        ], templateXTextarea)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XViewpagerNg/XViewpagerNg.js

@@ -4,40 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { boostedQueueMicrotask, Component, html, } from '@lynx-js/web-elements-reactive';
+import { boostedQueueMicrotask, Component, } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XViewpagerNgEvents } from './XViewpagerNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';
+import { templateXViewpageNg } from '@lynx-js/web-elements-template';
 let XViewpagerNg = (() => {
-    let _classDecorators = [Component('x-viewpager-ng', [CommonEventsAndMethods, XViewpagerNgEvents], html `
-    <style>
-      #bounce-padding {
-        display: none;
-        flex: 0 0 0;
-        align-self: stretch;
-        scroll-snap-align: none;
-        flex-basis: 100%;
-      }
-      #content {
-        flex: 0 0 100%;
-        flex-direction: row;
-        align-self: stretch;
-        display: inherit;
-        justify-content: inherit;
-        align-items: inherit;
-        overflow: inherit;
-        scrollbar-width: none;
-        scroll-snap-type: inherit;
-      }
-      #content::-webkit-scrollbar {
-        display: none;
-      }
-    </style>
-    <div id="bounce-padding" part="bounce-padding"></div>
-    <div id="content" part="content">
-      <slot></slot>
-    </div>
-  `)];
+    let _classDecorators = [Component('x-viewpager-ng', [CommonEventsAndMethods, XViewpagerNgEvents], templateXViewpageNg)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "private": false,
   "repository": {
     "type": "git",
@@ -100,7 +100,8 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-elements-reactive": "0.2.1"
+    "@lynx-js/web-elements-reactive": "0.2.2",
+    "@lynx-js/web-elements-template": "0.7.2"
   },
   "devDependencies": {
     "tslib": "^2.8.1"