amateras 0.3.0 → 0.4.0

package/ext/css/src/lib/colorAssign.ts

@@ -1,6 +1,6 @@
 import { _Object_assign } from "../../../../src/lib/native";
 
-export function colorAssign(key: string, colors: {[key: number]: string}) {
+export const colorAssign = (key: string, colors: {[key: number]: string}) => {
     if (!$.color) _Object_assign($, {color: {}});
     _Object_assign($.color, {[key]: colors})
 }

package/ext/css/src/structure/$CSSContainerRule.ts

@@ -0,0 +1,13 @@
+import { _Array_from, _instanceof } from "amateras/lib/native";
+import { $CSSRule } from "#structure/$CSSRule";
+
+export class $CSSContainerRule extends $CSSRule {
+    condition: string;
+    name: string;
+    constructor(selector: string) {
+        super(selector);
+        const [_, name, condition] = selector.match(/@container (.+?) (.+)/) as [string, string, string]
+        this.name = name;
+        this.condition = condition;
+    }
+}

package/ext/css/src/structure/$CSSRule.ts

@@ -8,6 +8,6 @@ export abstract class $CSSRule {
     }
 
     get options(): {[key: string]: any} {
-        return _Object_fromEntries(_Array_from(this.rules).map(rule => [rule.selector, rule]))
+        return _Object_fromEntries(_Array_from(this.rules).map(rule => [rule.selector, rule.options]))
     }
 }

package/ext/css/src/structure/$CSSStyleRule.ts

@@ -8,13 +8,6 @@ export class $CSSStyleRule extends $CSSRule {
         super(selector);
     }
 
-    clone(selector: string) {
-        const rule = new $CSSStyleRule(selector)
-        rule.declarations = this.declarations;
-        rule.rules = this.rules;
-        return rule
-    }
-
     get options(): {[key: string]: any} {
         return {..._Object_fromEntries(_Array_from(this.declarations).map(([_, dec]) => [dec.key, dec])), ...super.options}
     }

package/ext/css/src/structure/$CSSVariable.ts

@@ -1,7 +1,7 @@
-export class $CSSVariable {
+export class $CSSVariable<V = string> {
     key: string;
-    value: string;
-    constructor(key: string, value: string) {
+    value: V;
+    constructor(key: string, value: V) {
         this.key = key;
         this.value = value;
     }

package/ext/html/html.ts

@@ -10,16 +10,4 @@ import './node/$Media';
 import './node/$OptGroup';
 import './node/$Option';
 import './node/$Select';
-import './node/$TextArea';
-export * from './node/$Anchor';
-export * from './node/$Canvas';
-export * from './node/$Dialog';
-export * from './node/$Form';
-export * from './node/$Image';
-export * from './node/$Input';
-export * from './node/$Label';
-export * from './node/$Media';
-export * from './node/$OptGroup';
-export * from './node/$Option';
-export * from './node/$Select';
-export * from './node/$TextArea';
+import './node/$TextArea';

package/ext/i18n/README.md

@@ -0,0 +1,53 @@
+# amateras/i18n
+
+## Usage
+```ts
+import 'amateras';
+import 'amateras/i18n';
+
+const $t = $.i18n()
+// add 'en' locale dictionary context
+.add('en', {
+    homepage: {
+        _: 'Home',
+        hello: 'Hello, $name$!',
+    }
+})
+// set 'en' as locale language
+.locale('en')
+
+$(document.body).content([
+    $('h1').content( $t('homepage') )
+    // <h1><text>Home</text></h1>
+    $t('homepage.hello', {name: 'Amateras'}) 
+    // <text>Hello, Amateras!</text>
+])
+```
+
+## Change Language
+```ts
+$t.locale('zh')
+// all translation text will be updated
+```
+
+## Import Dictionary Context
+
+```ts
+// ./i18n/en.ts
+export default {
+    hello: 'Hello, $name$!'
+}
+
+// ./i18n/zh.ts
+export default {
+    hello: '您好，$name$！'
+}
+
+// ./entry_file.ts
+const $t = $.i18n()
+.add('en', () => import('./i18n/en.ts'))
+.add('zh', () => import('./i18n/zh.ts'))
+// set 'zh' as locale language
+// and fetch file automatically from path
+.locale('zh');
+```

package/ext/i18n/package.json

@@ -0,0 +1,10 @@
+{
+    "name": "@amateras/i18n",
+    "peerDependencies": {
+        "amateras": "../../"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#node/*": "./src/node/*.ts"
+    }
+}

package/ext/i18n/src/index.ts

@@ -0,0 +1,54 @@
+import { _Array_from, _instanceof, _Object_assign } from "amateras/lib/native"
+import { $ } from "amateras/core"
+import { I18n } from "#structure/I18n"
+import type { I18nText as _I18nText, I18nTextOptions } from "#node/I18nText";
+import { I18nDictionary, type I18nDictionaryContext, type I18nDictionaryContextImporter } from "#structure/I18nDictionary";
+
+_Object_assign($, {
+    i18n(defaultLocale: string) {
+        const i18n = new I18n(defaultLocale);
+        const i18nFn = (key: string, options?: I18nTextOptions) => i18n.translate(key, options);
+        _Object_assign(i18nFn, { 
+            i18n,
+            locale(locale: string) {
+                if (!arguments.length) return i18n.locale();
+                i18n.locale(locale);
+                return this;
+            },
+            add(lang: string, context: I18nDictionaryContext | I18nDictionaryContextImporter) {
+                i18n.map.set(lang, new I18nDictionary(context));
+                return this;
+            },
+            delete(lang: string) {
+                i18n.map.delete(lang);
+                return this;
+            }
+        })
+        return i18nFn
+    }
+})
+
+type ResolvedAsyncDictionary<F extends I18nDictionaryContextImporter> = Awaited<ReturnType<F>>['default'];
+
+type DeepKeys<T> = T extends I18nDictionaryContext
+  ? {
+      [K in keyof T]: K extends string
+        ? K extends '_' ? never : `${K}` | `${K}.${DeepKeys<T[K]>}`
+        : never;
+    }[keyof T]
+  : never;
+
+declare module "amateras/core" {
+    export namespace $ {
+        export interface I18nFunction<D extends I18nDictionaryContext = {}> {
+            (path: DeepKeys<D>, ...args: any[]): I18nText;
+            i18n: I18n;
+            locale(): string;
+            locale(lang?: $Parameter<string>): this;
+            add<F extends I18nDictionaryContext | I18nDictionaryContextImporter>(lang: string, dictionary: F): I18nFunction<D | (F extends I18nDictionaryContextImporter ? ResolvedAsyncDictionary<F> : F)>;
+            delete(lang: string): this;
+        }
+        export function i18n(defaultLocale: string): I18nFunction;
+        export type I18nText = _I18nText;
+    }
+}

package/ext/i18n/src/node/I18nText.ts

@@ -0,0 +1,35 @@
+import { _Array_from, isUndefined } from "amateras/lib/native";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import type { I18n } from "#structure/I18n";
+
+export class I18nText extends $HTMLElement<HTMLElement, { i18nupdate: Event }> {
+    i18n: I18n;
+    key: string;
+    options: I18nTextOptions | undefined;
+    constructor(i18n: I18n, key: string, options?: I18nTextOptions) {
+        super('text');
+        this.i18n = i18n;
+        this.key = key;
+        this.options = options;
+        i18n.locale$.signal.subscribe(() => this.update())
+        this.update();
+    }
+    
+    async update() {
+        update: {
+            const {key, i18n} = this;
+            const dictionary = i18n.dictionary();
+            if (!dictionary) {this.content(key); break update}
+            const target = await dictionary.find(key);
+            if (isUndefined(target)) break update;
+            const snippets = target.split(/\$[a-zA-Z0-9_]+\$/);
+            if (snippets.length === 1 || !this.options) {this.content(target); break update}
+            const matches = target.matchAll(/(\$([a-zA-Z0-9_]+)\$)/g);
+            this.content(snippets.map(text => [text, this.options?.[matches.next().value?.at(2)!] ?? null]));
+        }
+        this.dispatchEvent(new Event('i18nupdate'));
+        return this;
+    }
+}
+
+export type I18nTextOptions = {[key: string]: any}

package/ext/i18n/src/structure/I18n.ts

@@ -0,0 +1,40 @@
+import { _instanceof } from "amateras/lib/native";
+import { I18nText, type I18nTextOptions } from "#node/I18nText";
+import { I18nDictionary } from "#structure/I18nDictionary";
+
+export class I18n {
+    locale$ = $.signal<string>('');
+    map = new Map<string, I18nDictionary>();
+    #defaultLocale: string;
+    constructor(defaultLocale: string) {
+        this.#defaultLocale = defaultLocale;
+        this.locale$.set(defaultLocale);
+    }
+
+    defaultLocale(): string;
+    defaultLocale(locale: string): this;
+    defaultLocale(locale?: string) {
+        if (!arguments.length) return this.#defaultLocale;
+        if (locale) this.locale$.set(locale);
+        return this;
+    }
+
+    locale(): string;
+    locale(locale: string): this;
+    locale(locale?: string) {
+        if (!arguments.length) return this.locale$();
+        if (locale) this.locale$.set(locale)
+        return this;
+    }
+
+    dictionary(locale = this.locale$()) {
+        if (!locale) return null;
+        const dictionary = this.map.get(locale);
+        return dictionary;
+    }
+
+    translate(key: string, options?: I18nTextOptions) {
+        return new I18nText(this, key, options);
+    }
+}
+

package/ext/i18n/src/structure/I18nDictionary.ts

@@ -0,0 +1,31 @@
+import { _instanceof, isObject } from "amateras/lib/native";
+
+export class I18nDictionary {
+    #context: I18nDictionaryContext | Promise<I18nDictionaryContext> | null = null;
+    #fetch: I18nDictionaryContextImporter | null = null;
+    constructor(resolver: I18nDictionaryContext | I18nDictionaryContextImporter) {
+        if (_instanceof(resolver, Function)) this.#fetch = resolver;
+        else this.#context = resolver;
+    }
+
+    async context(): Promise<I18nDictionaryContext> {
+        if (this.#context) return await this.#context;
+        if (!this.#fetch) throw 'I18n Context Fetch Error';
+        return this.#context = this.#fetch().then((module) => module.default);
+    }
+
+    async find(path: string, context?: I18nDictionaryContext): Promise<string | undefined> {
+        if (!context) context = await this.context();
+        const [snippet, ...rest] = path.split('.') as [string, ...string[]];
+        const target = context[snippet];
+        if (isObject(target)) {
+            if (rest.length) return this.find(rest.join('.'), target);
+            else return target['_'] as string;
+        } 
+        if (rest.length) return path;
+        else return target;
+    }
+}
+
+export type I18nDictionaryContext = {[key: string]: string | I18nDictionaryContext}
+export type I18nDictionaryContextImporter = () => Promise<{default: I18nDictionaryContext}>

package/ext/markdown/index.ts

@@ -0,0 +1,123 @@
+import { _Array_from, forEach } from "#lib/native";
+
+const blockProcesses = new Set<MarkdownBlockProcessOptions>();
+const inlineProcesses = new Set<MarkdownProcessFunction>();
+
+export class Markdown {
+    blockProcessSet = new Set(blockProcesses);
+    inlineProcessSet = new Set(inlineProcesses);
+    constructor() {}
+
+    blockProcess(options: MarkdownBlockProcessOptions) {
+        this.blockProcessSet.add(options);
+        return this;
+    }
+
+    inlineProcess(handle: MarkdownProcessFunction) {
+        this.inlineProcessSet.add(handle);
+        return this;
+    }
+
+    toHTML(text: string) {
+        const blocks = _Array_from(text.matchAll(/(?:.+?\n?)+/gm));
+        return blocks.map(block => {
+            let matched, blockText = block[0]
+            for (const blockProcess of blockProcesses) {
+                matched = blockText.match(blockProcess.regexp);
+                if (!matched) continue;
+                blockText = blockProcess.handle(blockText);
+                const removeHTML = blockText.replaceAll(/<.+>[^<]+?<\/.+>/gm, '');
+                if (!removeHTML) break;
+            }
+            if (!matched) blockText = paragraph(blockText);
+            inlineProcesses.forEach(fn => blockText = fn(blockText))
+            return blockText;
+        }).join('')
+    }
+
+    toDOM(text: string) {
+        return $('article').innerHTML(this.toHTML(text))
+    }
+}
+
+export type MarkdownProcessFunction = (text: string) => string;
+export interface MarkdownBlockProcessOptions {
+    regexp: RegExp,
+    handle: (text: string) => string;
+}
+
+const blockProcess = (options: MarkdownBlockProcessOptions) => blockProcesses.add(options);
+const inlineProcess = (handle: MarkdownProcessFunction) => inlineProcesses.add(handle);
+const replaceAll = (str: string, searchValue: string | RegExp, replacer: ((substring: string, ...args: any[]) => string) | string): string => str.replaceAll(searchValue, replacer as any);
+const trim = (str: string) => str.trim();
+const paragraph = (str: string) => {
+    return replaceAll(str, /(?:.+?\n?)+/gm, $0 => `<p>${trim($0)}</p>`)
+}
+// Headings
+blockProcess({
+    regexp: /^(#+) (.+)/gm,
+    handle: text => replaceAll(text, /^(#+) (.+)/gm, (_, $1: string, $2) => `<h${$1.length}>${$2}</h${$1.length}>`)
+});
+blockProcess({
+    regexp: /^(.+)\n==+$/gm,
+    handle: text => replaceAll(text, /^(.+)\n==+$/gm, (_, $1) => `<h1>${$1}</h1>`)
+});
+blockProcess({
+    regexp: /^(.+)\n--+$/gm,
+    handle: text => replaceAll(text, /^(.+)\n--+$/gm, (_, $1) => `<h2>${$1}</h2>`)
+});
+// Blockquote
+blockProcess({
+    regexp: /(?:^> ?.*(?:\n|$))+/gm,
+    handle: text => {
+        const fn = (str: string) => {
+            const blocks = _Array_from(str.matchAll(/(?:^> ?.*(?:\n|$))+/gm));
+            forEach(blocks, block => {
+                const blocked = fn(replaceAll(block[0], /^> ?/gm, ''));
+                str = str.replace(block[0], `<blockquote>\n${paragraph(blocked)}\n</blockquote>`);
+            })
+            return str;
+        }
+        return fn(text);
+    }
+});
+// List
+blockProcess({
+    regexp: /(?:^(?:\t|(?:  )+)?(?:-|[0-9]+\.) (?:.+\n?))+/gm,
+    handle: text => {
+        const fn = (str: string) => {
+            const blocks = _Array_from(str.matchAll(/(?:^(?:\t|(?:  )+)?(?:-|[0-9]+\.) (?:.+\n?))+/gm));
+            forEach(blocks, block => {
+                let haveList = false // check this loop have list
+                const type = block[0].match(/^(-|[0-9]+\.) /)?.[1] === '-' ? 'ul' : 'ol';
+                const listed = replaceAll(block[0], /^(?:-|[0-9]+\.) (.+)/gm, (_, $1: string) => (haveList = true, `<li>\n${trim($1)}\n</li>`));
+                const clearTabbed = replaceAll(listed, /^(?:\t|(?:  ))/gm, '');
+                const convertedList = fn(clearTabbed);
+                str = str.replace(block[0], haveList ? `<${type}>\n${trim(convertedList)}\n</${type}>` : convertedList);
+            })
+            return str;
+        }
+        return fn(text);
+    }
+})
+// Codeblock
+blockProcess({
+    regexp: /^```([^`\n]+)\n([^`]+)?```/gm,
+    handle: text => replaceAll(text, /^```([^`\n]+)\n([^`]+)?```/gm, (_, $1, $2: string) => `<pre><code>\n${trim($2)}\n</code></pre>`)
+})
+// Horizontal Rule
+blockProcess({
+    regexp: /^(?:---|\*\*\*|___)(\s+)?$/gm,
+    handle: text => replaceAll(text, /^(?:---|\*\*\*|___)(\s+)?$/gm, _ => `<hr>`)
+})
+// Bold
+inlineProcess(text => replaceAll(text, /\*\*([^*]+?)\*\*/g, (_, $1) => `<b>${$1}</b>`));
+// Italic
+inlineProcess(text => replaceAll(text, /\*([^*]+?)\*/g, (_, $1) => `<i>${$1}</i>`));
+// Image
+inlineProcess(text => replaceAll(text, /!\[(.+?)\]\((.+?)(?: "(.+?)?")?\)/g, (_, alt, src, title) => `<img src="${src}" alt="${alt}"${title ? ` title="${title}"` : ''}>`));
+// Link
+inlineProcess(text => replaceAll(text, /\[(.+?)\]\((?:(\w\w+?:[^\s]+?)(?: "(.+?)?")?)\)/g, (_, content, href, title) => `<a href="${href}"${title ? ` title="${title}"` : ''}>${content}</a>`));
+inlineProcess(text => replaceAll(text, /\[(.+?)\]\((?:(\w+?@(?:\w|\.\w)+?)(?: "(.+)?")?)\)/g, (_, content, mail, title) => `<a href="mailto:${mail}"${title ? ` title="${title}"` : ''}>${content}</a>`));
+inlineProcess(text => replaceAll(text, /<(\w\w+?:[^\s]+?)>/g, (_, href) => `<a href="${href}">${href}</a>`));
+inlineProcess(text => replaceAll(text, /<(\w+?@(?:\w|\.\w)+?)>/g, (_, mail) => `<a href="mailto:${mail}">${mail}</a>`));

package/ext/router/index.ts

@@ -21,6 +21,13 @@ declare module 'amateras/core' {
         export function forward(): typeof Router;
     }
 }
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'routeopen': Event;
+    }
+}
+
 // assign methods
 _Object_assign($, {
     open: Router.open.bind(Router),
@@ -32,7 +39,7 @@ _Object_assign($, {
 forEach([
     `router{display:block}`,
     `page{display:block}`
-], rule => $.stylesheet.insertRule(rule));
+], $.style);
 // assign nodes
 $.assign([
     ['router', Router],

package/ext/router/node/Page.ts

@@ -9,6 +9,7 @@ export class Page<R extends Route<any> = any, Data extends RouteData = any> exte
     params: Data['params'];
     query: Data['query'];
     #pageTitle: null | string = null;
+    initial = false;
     constructor(route: R, data?: {params: any, query: any}) {
         super('page');
         this.route = route;

package/ext/router/node/Route.ts

@@ -1,5 +1,5 @@
 import { _instanceof, _Object_fromEntries, _Array_from } from "#lib/native";
-import { $Element } from "#node/node";
+import { $Element } from "#node/$Element";
 import type { AsyncRoute, RouteBuilder, RouteDataResolver } from "..";
 import { Page } from "./Page";
 
@@ -37,6 +37,7 @@ export class Route<Path extends string = string> extends BaseRouteNode<Path> {
     async build(data: {params: any, query: any} = {params: {}, query: {}}, page?: Page) {
         page = page ?? new Page(this, data);
         page.params = data.params;
+        page.initial = true;
         let resolver: any = this.builder(page);
         if (_instanceof(resolver, Promise)) {
             const result = await resolver as any;

package/ext/router/node/Router.ts

@@ -1,24 +1,32 @@
 import type { AnchorTarget } from "#html/$Anchor";
-import { _Array_from, _document, _instanceof, _Object_fromEntries, forEach } from "#lib/native";
+import { _document } from "#lib/env";
+import { _Array_from, _instanceof, _JSON_parse, _JSON_stringify, _Object_entries, _Object_fromEntries, forEach, startsWith } from "#lib/native";
 import { Page } from "./Page";
 import { BaseRouteNode, Route } from "./Route";
 
 // history index
 let index = 0;
+const _addEventListener = addEventListener;
 const _location = location;
 const {origin} = _location;
 const _history = history;
+const _sessionStorage = sessionStorage;
 const documentElement = _document.documentElement;
 const [PUSH, REPLACE] = [1, 2] as const;
 const [FORWARD, BACK] = ['forward', 'back'] as const;
-
-// disable browser scroll restoration
-_history.scrollRestoration = 'manual';
-
+const scrollStorageKey = '__scroll__';
 /** convert path string to URL object */
 const toURL = (path: string | URL) => 
-    _instanceof(path, URL) ? path : path.startsWith('http') ? new URL(path) : new URL(path.startsWith(origin) ? path : origin + path);
+    _instanceof(path, URL) ? path : startsWith(path, 'http') ? new URL(path) : new URL(startsWith(path, origin) ? path : origin + path);
 
+type ScrollData = {[key: number]: {x: number, y: number}};
+const scrollRecord = (e?: Event) => {
+    const data = _JSON_parse(_sessionStorage.getItem(scrollStorageKey) ?? '{}') as ScrollData;
+    data[index] = { x: documentElement.scrollLeft, y: documentElement.scrollTop };
+    // e is Event when called from scroll or beforeload
+    if (!e) forEach(_Object_entries(data), ([i]) => +i > index && delete data[+i])
+    _sessionStorage.setItem(scrollStorageKey, _JSON_stringify(data));
+}
 /** handle history state with push and replace state. */
 const historyHandler = async (path: string | URL | Nullish, mode: 1 | 2, target?: AnchorTarget) => {
     if (!path) return;
@@ -26,16 +34,14 @@ const historyHandler = async (path: string | URL | Nullish, mode: 1 | 2, target?
     if (url.href === _location.href) return;
     if (target && target !== '_self') return open(url, target);
     if (url.origin !== origin) return open(url, target);
-    _history.replaceState({
-        index: index,
-        x: documentElement.scrollLeft,
-        y: documentElement.scrollTop
-    }, '', _location.href);
+    scrollRecord();
     if (mode === PUSH) index += 1;
     Router.direction = FORWARD;
-    history[mode === PUSH ? 'pushState' : 'replaceState']({index}, '' , url)
-    for (let router of Router.routers) router.routes.size && await router.resolve(path)
+    _history[mode === PUSH ? 'pushState' : 'replaceState']({index}, '' , url);
+    for (let router of Router.routers) router.routes.size && await router.resolve(path);
 }
+// disable browser scroll restoration
+_history.scrollRestoration = 'manual';
 
 export class Router extends BaseRouteNode<''> {
     static pageRouters = new Map<Page, Router>();
@@ -88,7 +94,7 @@ export class Router extends BaseRouteNode<''> {
                     if (routeSnippet.includes(':')) {
                         if (targetSnippet === '/') continue routeLoop;
                         const [prefix, paramName] = routeSnippet.split(':') as [string, string];
-                        if (!targetSnippet.startsWith(prefix)) continue routeLoop;
+                        if (!startsWith(targetSnippet, prefix)) continue routeLoop;
                         routeData.params[paramName] = targetSnippet.replace(`${prefix}`, '');
                         pass();
                         continue splitLoop;
@@ -105,21 +111,20 @@ export class Router extends BaseRouteNode<''> {
         const targetRoutes = determineRoute(this, pathname + '/', hash);
         // build pages
         let prevPage: null | Page = null, prevRoute: BaseRouteNode<any> = this;
+        const appendPage = (prevRouter: Router | undefined, page: Page) => page.parentNode !== prevRouter?.node && prevRouter?.content(page);
+
         for (const [route, pathId] of targetRoutes) {
             const page = this.pageMap.get(pathId) ?? new Page(route ?? prevRoute.routes.get('404') ?? new Route('404', () => null), routeData);
-            await route?.build(routeData, page);
+            if (!page.initial) await route?.build(routeData, page);
             _document && (_document.title = page.pageTitle() ?? _document.title);
             this.pageMap.set(pathId, page);
-
-            if (href === _location.href) {
-                if (prevPage) Router.pageRouters.get(prevPage)?.content(page);
-                else this.content(page);
-            }
+            if (href === _location.href) appendPage(prevPage ? Router.pageRouters.get(prevPage) : this, page);
             prevPage = page;
             if (route) prevRoute = route;
         }
-        let { x, y } = _history.state ?? {x: 0, y: 0};
+        let { x, y } = Router.scroll ?? {x: 0, y: 0};
         scrollTo(x, y);
+        this.dispatchEvent(new Event('routeopen', {bubbles: true}));
         return this;
     }
 
@@ -131,8 +136,14 @@ export class Router extends BaseRouteNode<''> {
             index = stateIndex;
             this.resolve(_location.href);
         }
-        addEventListener('popstate', resolve);
+        _addEventListener('popstate', resolve);
+        _addEventListener('beforeunload', scrollRecord);
+        _addEventListener('scroll', scrollRecord, false);
         resolve();
         return this;
     }
+
+    static get scroll(): ScrollData[number] {
+        return _JSON_parse(_sessionStorage.getItem(scrollStorageKey) ?? '{}')[index] ?? {x: 0, y: 0}
+    }
 }

package/ext/ssr/index.ts

@@ -1,8 +1,10 @@
 import './env';
 import 'amateras';
-import { _Array_from, _document, _instanceof, _Object_assign, _Object_defineProperty, forEach } from "amateras/lib/native";
-import { $Element, $Node, $Text } from "amateras/node";
+import { _Array_from, _instanceof, _Object_assign, _Object_defineProperty, forEach } from "amateras/lib/native";
+import { $Element } from 'amateras/node/$Element';
 import { BROWSER, NODE } from 'esm-env';
+import { $Node, $Text } from 'amateras/node/$Node';
+import { _document } from '../../src/lib/env';
 
 declare module 'amateras/core' {
     export namespace $ {

package/ext/ui/lib/VirtualScroll.ts

@@ -0,0 +1,24 @@
+import { _Array_from, _instanceof, forEach } from "amateras/lib/native";
+import type { $Virtual } from "amateras/node/$Virtual";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import { _document } from "../../../src/lib/env";
+
+export function VirtualScroll($parent: $Virtual, scroller: Node = _document) {
+    scroller.addEventListener('scroll', render, true);
+    $parent.on('layout', render);
+    function render() {
+        const getRect = ($node: $HTMLElement) => $node.getBoundingClientRect();
+        const number = (str: string) => parseInt(str);
+        const parentRect = getRect($parent);
+        const children = _Array_from($parent.nodes);
+        forEach(children, $child => {
+            if (!_instanceof($child, $HTMLElement)) return;
+            const { top, height } = $child.style();
+            const topPos = parentRect.top + number(top);
+            const bottomPos = topPos + number(height);
+            if (bottomPos < 0 || topPos > innerHeight) $parent.hide($child);
+            else $parent.show($child);
+        })
+        $parent.render();
+    }
+}