amateras 0.2.0 → 0.3.0

package/ext/html/node/$Option.ts

@@ -7,7 +7,31 @@ export class $Option extends $HTMLElement<HTMLOptionElement> {
     }
 }
 
-export interface $Option extends $HTMLElement<HTMLOptionElement> {}
+export interface $Option extends $HTMLElement<HTMLOptionElement> {
+    /** {@link HTMLOptionElement.form} */
+    readonly form: HTMLFormElement | null;
+    /** {@link HTMLOptionElement.index} */
+    readonly index: number;
+
+    /** {@link HTMLOptionElement.defaultSelected} */
+    defaultSelected(defaultSelected: $Parameter<boolean>): this;
+    defaultSelected(): boolean;
+    /** {@link HTMLOptionElement.disabled} */
+    disabled(disabled: $Parameter<boolean>): this;
+    disabled(): boolean;
+    /** {@link HTMLOptionElement.label} */
+    label(label: $Parameter<string>): this;
+    label(): string;
+    /** {@link HTMLOptionElement.selected} */
+    selected(selected: $Parameter<boolean>): this;
+    selected(): boolean;
+    /** {@link HTMLOptionElement.text} */
+    text(text: $Parameter<string>): this;
+    text(): string;
+    /** {@link HTMLOptionElement.value} */
+    value(value: $Parameter<string>): this;
+    value(): string;
+}
 
 assignHelper(HTMLOptionElement, $Option, 'option');
 

package/ext/html/node/$Select.ts

@@ -7,7 +7,67 @@ export class $Select extends $HTMLElement<HTMLSelectElement> {
     }
 }
 
-export interface $Select extends $HTMLElement<HTMLSelectElement> {}
+export interface $Select extends $HTMLElement<HTMLSelectElement> {
+    /** {@link HTMLSelectElement.form} */
+    readonly form: HTMLFormElement | null;
+    /** {@link HTMLSelectElement.labels} */
+    readonly labels: NodeListOf<HTMLLabelElement>;
+    /** {@link HTMLSelectElement.options} */
+    readonly options: HTMLOptionsCollection;
+    /** {@link HTMLSelectElement.selectedOptions} */
+    readonly selectedOptions: HTMLCollectionOf<HTMLOptionElement>;
+    /** {@link HTMLSelectElement.type} */
+    readonly type: "select-one" | "select-multiple";
+    /** {@link HTMLSelectElement.validationMessage} */
+    readonly validationMessage: string;
+    /** {@link HTMLSelectElement.validity} */
+    readonly validity: ValidityState;
+    /** {@link HTMLSelectElement.willValidate} */
+    readonly willValidate: boolean;
+
+    /** {@link HTMLSelectElement.autocomplete} */
+    autocomplete(autocomplete: $Parameter<AutoFill>): this;
+    autocomplete(): AutoFill;
+    /** {@link HTMLSelectElement.disabled} */
+    disabled(disabled: $Parameter<boolean>): this;
+    disabled(): boolean;
+    /** {@link HTMLSelectElement.length} */
+    length(length: $Parameter<number>): this;
+    length(): number;
+    /** {@link HTMLSelectElement.multiple} */
+    multiple(multiple: $Parameter<boolean>): this;
+    multiple(): boolean;
+    /** {@link HTMLSelectElement.name} */
+    name(name: $Parameter<string>): this;
+    name(): string;
+    /** {@link HTMLSelectElement.required} */
+    required(required: $Parameter<boolean>): this;
+    required(): boolean;
+    /** {@link HTMLSelectElement.selectedIndex} */
+    selectedIndex(selectedIndex: $Parameter<number>): this;
+    selectedIndex(): number;
+    /** {@link HTMLSelectElement.size} */
+    size(size: $Parameter<number>): this;
+    size(): number;
+    /** {@link HTMLSelectElement.value} */
+    value(value: $Parameter<string>): this;
+    value(): string;
+
+    /** {@link HTMLSelectElement.add} */
+    add(element: HTMLOptionElement | HTMLOptGroupElement, before?: HTMLElement | number | null): this;
+    /** {@link HTMLSelectElement.checkValidity} */
+    checkValidity(): boolean;
+    /** {@link HTMLSelectElement.item} */
+    item(index: number): HTMLOptionElement | null;
+    /** {@link HTMLSelectElement.namedItem} */
+    namedItem(name: string): HTMLOptionElement | null;
+    /** {@link HTMLSelectElement.reportValidity} */
+    reportValidity(): boolean;
+    /** {@link HTMLSelectElement.setCustomValidity} */
+    setCustomValidity(error: string): this;
+    /** {@link HTMLSelectElement.showPicker} */
+    showPicker(): this;
+}
 
 assignHelper(HTMLSelectElement, $Select, 'select');
 

package/ext/router/index.ts

@@ -1,4 +1,5 @@
-import { _Object_assign } from "#lib/native";
+import type { AnchorTarget } from "#html/$Anchor";
+import { _Object_assign, forEach } from "#lib/native";
 import type { $NodeContentResolver } from "#node/$Node";
 import type { Page } from "./node/Page";
 import { Route } from "./node/Route";
@@ -7,13 +8,14 @@ import { RouterAnchor } from "./node/RouterAnchor";
 export * from "./node/Route";
 export * from "./node/Router";
 export * from "./node/Page";
+export * from "./node/RouterAnchor";
 
 declare module 'amateras/core' {
     export function $<P extends string>(nodeName: 'route', path: P, builder: RouteBuilder<Route<P>, RouteDataResolver<P>>): Route<P>;
     export function $(nodeName: 'router', page?: Page<any>): Router;
     export function $(nodeName: 'ra'): RouterAnchor;
     export namespace $ {
-        export function open(url: string | URL | Nullish): typeof Router;
+        export function open(url: string | URL | Nullish, target: AnchorTarget): typeof Router;
         export function replace(url: string | URL | Nullish): typeof Router;
         export function back(): typeof Router;
         export function forward(): typeof Router;
@@ -27,10 +29,10 @@ _Object_assign($, {
     forward: Router.forward.bind(Router)
 });
 // define styles
-[
+forEach([
     `router{display:block}`,
     `page{display:block}`
-].forEach(rule => $.stylesheet.insertRule(rule));
+], rule => $.stylesheet.insertRule(rule));
 // assign nodes
 $.assign([
     ['router', Router],

package/ext/router/node/Route.ts

@@ -34,8 +34,8 @@ export class Route<Path extends string = string> extends BaseRouteNode<Path> {
         super(path, builder, 'route');
     }
 
-    async build(data: {params: any, query: any} = {params: {}, query: {}}) {
-        const page = new Page(this, data);
+    async build(data: {params: any, query: any} = {params: {}, query: {}}, page?: Page) {
+        page = page ?? new Page(this, data);
         page.params = data.params;
         let resolver: any = this.builder(page);
         if (_instanceof(resolver, Promise)) {

package/ext/router/node/Router.ts

@@ -1,32 +1,55 @@
-import { _Array_from, _instanceof, _Object_fromEntries } from "#lib/native";
+import type { AnchorTarget } from "#html/$Anchor";
+import { _Array_from, _document, _instanceof, _Object_fromEntries, forEach } from "#lib/native";
 import { Page } from "./Page";
 import { BaseRouteNode, Route } from "./Route";
 
+// history index
+let index = 0;
 const _location = location;
 const {origin} = _location;
 const _history = history;
-const toURL = (path: string | URL) => 
-    _instanceof(path, URL) ? path : new URL(path.startsWith(origin) ? path : origin + path);
+const documentElement = _document.documentElement;
 const [PUSH, REPLACE] = [1, 2] as const;
-const historyHandler = (path: string | URL | Nullish, mode: 1 | 2) => {
+const [FORWARD, BACK] = ['forward', 'back'] as const;
+
+// disable browser scroll restoration
+_history.scrollRestoration = 'manual';
+
+/** 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);
+
+/** handle history state with push and replace state. */
+const historyHandler = async (path: string | URL | Nullish, mode: 1 | 2, target?: AnchorTarget) => {
     if (!path) return;
     const url = toURL(path);
-    if (url.origin !== origin) return this;
-    history[mode === PUSH ? 'pushState' : 'replaceState']({}, '' , url)
-    Router.routers.forEach(router => router.routes.size && router.resolve(path));
+    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);
+    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)
 }
+
 export class Router extends BaseRouteNode<''> {
     static pageRouters = new Map<Page, Router>();
     static routers = new Set<Router>();
     pageMap = new Map<string, Page>();
+    static direction: 'back' | 'forward' = FORWARD;
     constructor(page?: Page) {
         super('', () => [], 'router')
         Router.routers.add(this);
         if (page) Router.pageRouters.set(page, this);
     }
 
-    static open(path: string | URL | Nullish) {
-        historyHandler(path, PUSH);
+    static open(path: string | URL | Nullish, target?: AnchorTarget) {
+        historyHandler(path, PUSH, target);
         return this;
     }
 
@@ -46,7 +69,7 @@ export class Router extends BaseRouteNode<''> {
     }
 
     async resolve(path: string | URL) {
-        const {pathname, searchParams, hash} = toURL(path);
+        const {pathname, searchParams, hash, href} = toURL(path);
         const routeData = { params: {} as {[key: string]: string}, query: _Object_fromEntries(searchParams) }
         const split = (p: string) => p.replaceAll(/\/+/g, '/').split('/').map(path => `/${path}`);
 
@@ -83,20 +106,31 @@ export class Router extends BaseRouteNode<''> {
         // build pages
         let prevPage: null | Page = null, prevRoute: BaseRouteNode<any> = this;
         for (const [route, pathId] of targetRoutes) {
-            const page = await (this.pageMap.get(pathId) ?? (route ? route.build(routeData) : prevRoute.routes.get('404')?.build(routeData) ?? new Route('404', () => null).build()));
-            const _document = document;
+            const page = this.pageMap.get(pathId) ?? new Page(route ?? prevRoute.routes.get('404') ?? new Route('404', () => null), routeData);
+            await route?.build(routeData, page);
             _document && (_document.title = page.pageTitle() ?? _document.title);
             this.pageMap.set(pathId, page);
-            if (prevPage) Router.pageRouters.get(prevPage)?.content(page);
-            else this.content(page);
+
+            if (href === _location.href) {
+                if (prevPage) Router.pageRouters.get(prevPage)?.content(page);
+                else this.content(page);
+            }
             prevPage = page;
             if (route) prevRoute = route;
         }
+        let { x, y } = _history.state ?? {x: 0, y: 0};
+        scrollTo(x, y);
         return this;
     }
 
     listen() {
-        const resolve = () => this.resolve(_location.href)
+        const resolve = () => {
+            const stateIndex = _history.state?.index ?? 0;
+            if (index > stateIndex) Router.direction = BACK;
+            if (index < stateIndex) Router.direction = FORWARD;
+            index = stateIndex;
+            this.resolve(_location.href);
+        }
         addEventListener('popstate', resolve);
         resolve();
         return this;

package/ext/router/node/RouterAnchor.ts

@@ -3,6 +3,6 @@ import { $Anchor } from "#html/$Anchor";
 export class RouterAnchor extends $Anchor {
     constructor() {
         super();
-        this.on('click', e => { e.preventDefault(); $.open(this.href()) })
+        this.on('click', e => { e.preventDefault(); $.open(this.href(), this.target()) })
     }
 }

package/ext/ssr/index.ts

@@ -1,6 +1,6 @@
 import './env';
 import 'amateras';
-import { _Array_from, _instanceof, _Object_assign, _Object_defineProperty } from "amateras/lib/native";
+import { _Array_from, _document, _instanceof, _Object_assign, _Object_defineProperty, forEach } from "amateras/lib/native";
 import { $Element, $Node, $Text } from "amateras/node";
 import { BROWSER, NODE } from 'esm-env';
 
@@ -24,7 +24,7 @@ export function onclient<T>(cb: () => T): T | undefined {
 _Object_assign($, {
     mount(id: string, $node: $Element) {
         if (!BROWSER) return;
-        const node = document.querySelector(`#${id}`);
+        const node = _document.querySelector(`#${id}`);
         if (!node) throw 'Target node of mounting not found';
         getData(node, $node);
         node.replaceWith($node.node);
@@ -32,12 +32,12 @@ _Object_assign($, {
         function getData(node: Node, $node: $Node) {
             if (node.nodeName === 'SIGNAL' && _instanceof(node, Element) && _instanceof($node, $Text)) {
                 const type = $(node).attr()['type'];
-                return $node.signals.forEach(signal => signal.value(type === 'number' ? Number(node.textContent) : type === 'boolean' ? node.textContent == 'true' ? true : false : node.textContent));
+                return forEach($node.signals, signal => signal.value(type === 'number' ? Number(node.textContent) : type === 'boolean' ? node.textContent == 'true' ? true : false : node.textContent));
             }
             if (_instanceof(node, Text)) return $node.textContent(node.textContent);
             if (_instanceof(node, Element) && _instanceof($node, $Element)) $node.attr($(node).attr());
             const arr = _Array_from($node.childNodes);
-            node.childNodes.forEach((_node, i) => {
+            forEach(node.childNodes, (_node, i) => {
                 const targetChildNode = arr.at(i);
                 if (!targetChildNode) throw 'Target DOM tree not matched';
                 getData(_node, targetChildNode.$)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amateras",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Amateras is a DOM Utility library.",
   "module": "index.ts",
   "type": "module",
@@ -32,6 +32,8 @@
     "./html": "./ext/html/html.ts",
     "./html/*": "./ext/html/node/*.ts",
     "./css": "./ext/css/src/index.ts",
+    "./css/colors": "./ext/css/src/lib/colors.ts",
+    "./css/color/*": "./ext/css/src/lib/colors/*.ts",
     "./router": "./ext/router/index.ts",
     "./ssr": "./ext/ssr/index.ts"
   },

package/src/core.ts

@@ -1,41 +1,45 @@
 import './global';
 import { Signal } from "#structure/Signal";
 import { $Element, type $Event } from "#node/$Element";
-import { $Node, type $NodeContentTypes } from '#node/$Node';
+import { $Node, type $NodeContentResolver, type $NodeContentTypes } from '#node/$Node';
 import '#node/node';
-import { _instanceof, isString, isFunction, _Object_assign, isObject, isNull, _Object_entries, _Object_defineProperty } from '#lib/native';
+import { _instanceof, isString, isFunction, _Object_assign, isObject, isNull, _Object_entries, _Object_defineProperty, forEach, isNumber, _Array_from, _document } from '#lib/native';
 import type { $HTMLElement } from '#node/$HTMLElement';
 
 const nodeNameMap: {[key: string]: Constructor<$Node>} = {}
 
-export function $<F extends (...args: any[]) => $Node>(fn: F, ...args: Parameters<F>): ReturnType<F>;
-export function $<C extends $NodeContentTypes | undefined | void, F extends () => C, P extends Parameters<F>>(fn: F, ...args: any[]): C;
-export function $<N extends $Node, T extends Constructor<N>, P extends ConstructorParameters<T>>(construct: T, ...args: P): N;
+export function $<F extends (...args: any[]) => $NodeContentResolver<$Node>, N extends number>(number: N, fn: F, ...args: Parameters<F>): Repeat<ReturnType<F>, N>;
+export function $<F extends (...args: any[]) => $NodeContentResolver<$Node>>(fn: F, ...args: Parameters<F>): ReturnType<F>;
+export function $<T extends Constructor<$Node>, P extends ConstructorParameters<T>, N extends number>(number: N, construct: T, ...args: P): Repeat<InstanceType<T>, N>;
+export function $<T extends Constructor<$Node>, P extends ConstructorParameters<T>>(construct: T, ...args: P): InstanceType<T>;
 export function $<N extends $Node>($node: N, ...args: any[]): N;
+export function $<H extends HTMLElement>(element: H, ...args: any[]): $HTMLElement<H>;
 export function $<E extends Element>(element: E, ...args: any[]): $Element<E>;
 export function $<K extends TemplateStringsArray>(string: K, ...values: any[]): $NodeContentTypes[];
+export function $<K extends keyof HTMLElementTagNameMap, N extends number>(number: N, tagname: K): Repeat<$HTMLElement<HTMLElementTagNameMap[K]>, N>;
 export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $HTMLElement<HTMLElementTagNameMap[K]>;
-export function $<H extends HTMLElement>(tagname: $Event<H>): $HTMLElement<H>;
-export function $<E extends Element>(tagname: $Event<E>): $Element<E>;
+export function $<Ev extends $Event<$Element, Event>>(event: Ev): Ev['target']['$'];
+export function $<N extends number>(number: N, tagname: string): Repeat<$HTMLElement<HTMLElement>, N>;
 export function $(tagname: string): $HTMLElement<HTMLElement>
-export function $(resolver: string | Element | $Node | Function | TemplateStringsArray | Event, ...args: any[]) {
+export function $(resolver: string | number | Element | $Node | Function | TemplateStringsArray | Event, ...args: any[]) {
     if (_instanceof(resolver, $Node)) return resolver;
     if (isString(resolver) && nodeNameMap[resolver]) return new nodeNameMap[resolver](...args);
     if (isFunction(resolver)) 
-        if (resolver.prototype?.constructor) return resolver.prototype.constructor(...args); 
+        if (resolver.prototype?.constructor) return new resolver.prototype.constructor(...args); 
         else return resolver(...args);
     if (resolver instanceof Array) {
         const iterate = args.values();
         return resolver.map(str => [str ?? undefined, iterate.next().value]).flat().filter(item => item);
     }
     if (_instanceof(resolver, Node) && _instanceof(resolver.$, $Node)) return resolver.$;
-    if (_instanceof(resolver, Event)) return $(resolver.currentTarget as Element)
+    if (_instanceof(resolver, Event)) return $(resolver.currentTarget as Element);
+    if (isNumber(resolver)) return _Array_from({length: resolver}).map(_ => $(args[0], ...args.slice(1)));
     return new $Element(resolver);
 }
 
 export namespace $ {
     export const stylesheet = new CSSStyleSheet();
-    document?.adoptedStyleSheets.push(stylesheet);
+    _document.adoptedStyleSheets.push(stylesheet);
     type SignalProcess<T> = T extends Array<any> ? {} : T extends object ? { [key in keyof T as `${string & key}$`]: SignalFunction<T[key]> } : {};
     export type SignalFunction<T> = {signal: Signal<T>, set: (newValue: T | ((oldValue: T) => T)) => SignalFunction<T>} & (() => T) & SignalProcess<T>;
     export function signal<T>(value: T): SignalFunction<T>
@@ -59,7 +63,7 @@ export namespace $ {
     export type ComputeFunction<T> = ({(): T}) & { signal: Signal<T> };
     export function compute<T>(process: () => T) {
         let subscribed = false;
-        const signalFn: SignalFunction<any> = $.signal(null);
+        const signalFn: SignalFunction<any> = signal(null);
         function computeFn() {
             if (!subscribed) return signalFn.set(subscribe())();
             else return signalFn.set(process())();
@@ -74,7 +78,7 @@ export namespace $ {
             subscribed = true;
             return result;
         }
-        _Object_defineProperty(computeFn, 'signal', { value: signalFn.signal });
+        _Object_assign(computeFn, { signal: signalFn.signal });
         return computeFn as ComputeFunction<T>
     }
 
@@ -82,11 +86,11 @@ export namespace $ {
     export function assign(nodeName: string, $node: Constructor<$Node>): void;
     export function assign(resolver: string | [nodeName: string, $node: Constructor<$Node>][], $node?: Constructor<$Node>) {
         if (isString(resolver)) $node && (nodeNameMap[resolver] = $node);
-        else resolver.forEach(([nodeName, $node]) => nodeNameMap[nodeName] = $node);
+        else forEach(resolver, ([nodeName, $node]) => nodeNameMap[nodeName] = $node);
         return $;
     }
 
-    export function orArrayResolver<T>(item: OrArray<T>): T[] {
+    export function toArray<T>(item: OrArray<T>): T[] {
         return _instanceof(item, Array) ? item : [item];
     }
 

package/src/global.ts

@@ -12,6 +12,10 @@ declare global {
     type OrNullish<T> = T | Nullish;
     type Constructor<T> = { new (...args: any[]): T }
     type $Parameter<T> = T | undefined | Signal<T> | Signal<T | undefined>
+    type Repeat<T, N extends number, Acc extends T[] = []> = 
+        Acc['length'] extends N 
+            ? Acc 
+            : Repeat<T, N, [...Acc, T]>;
     type Prettify<T> = {
         [K in keyof T]: T[K];
     } & {};

package/src/lib/assign.ts

@@ -6,17 +6,18 @@ export function assign(target: any, {set, get, fn}: {
     get?: string[], 
     fn?: string[]
 }) {
+    const [GET, SET, FN] = ['get', 'set', 'fn'] as const;
     const filterAndMap = (type: 'get' | 'set' | 'fn', arr: string[] | undefined) => {
         return arr?.map(prop => [type, prop]) ?? []
     }
-    const list = [...filterAndMap('get', get), ...filterAndMap('set', set), ...filterAndMap('fn', fn)] as [string, string][];
+    const list = [...filterAndMap(GET, get), ...filterAndMap(SET, set), ...filterAndMap(FN, fn)] as [string, string][];
     for (const [type, prop] of list) {
         _Object_defineProperty(target.prototype, prop, {
-            ...(type === 'get' ? {
+            ...(type === GET ? {
                 get() { return this.node[prop as any] }
             } : {
                 writable: true,
-                ...(type === 'set' ? {
+                ...(type === SET ? {
                     // set
                     value: function (this, args: any) {
                         if (!arguments.length) return this.node[prop];

package/src/lib/assignHelper.ts

@@ -3,7 +3,7 @@ import { assign } from "./assign";
 import { _Object_entries, _Object_getOwnPropertyDescriptors } from "./native";
 
 export function assignHelper(object: Constructor<Node>, target: Constructor<$Node>, tagname?: string) {
-    const {set, get, fn} = { set: [] as string[], get: [] as string[], fn: [] as string[] }
+    const [set, get, fn] = [[], [], []] as [string[], string[], string[]]
     // assign native object properties to target
     for (const [prop, value] of _Object_entries(_Object_getOwnPropertyDescriptors(object.prototype))) {
         if (prop in target.prototype) continue;

package/src/lib/native.ts

@@ -1,3 +1,5 @@
+// document
+export const _document = document;
 // Object
 export const _Object_fromEntries = Object.fromEntries;
 export const _Object_entries = Object.entries;
@@ -7,6 +9,13 @@ export const _Object_defineProperty = Object.defineProperty;
 export const _Object_getOwnPropertyDescriptors = Object.getOwnPropertyDescriptors;
 // Array
 export const _Array_from = Array.from;
+export function forEach<N extends Node>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => any, thisArgs?: any): void;
+export function forEach<K, V>(set: Map<K, V>, fn: (value: V, key: K, index: number, map: Map<K, V>) => any, thisArgs?: any): void;
+export function forEach<T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => any, thisArgs?: any): void;
+export function forEach<T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => any, thisArgs?: any): void;
+export function forEach<T>(arr: any, fn: any, thisArgs?: any) {
+    arr.forEach(fn, thisArgs)
+}
 // typeof
 export function _typeof(target: any, type: 'string' | 'number' | 'object' | 'boolean' | 'function' | 'bigint' | 'symbol' | 'undefined') {
     return typeof target === type;
@@ -29,6 +38,8 @@ export function isUndefined(target: any): target is undefined {
 export function isNull(target: any): target is null {
     return target === null;
 }
-export function _instanceof<T>(target: any, instance: abstract new (...args: any[]) => T): target is T {
-    return target instanceof instance;
-}
+export function _instanceof<T extends (abstract new (...args: any[]) => any)[]>(target: any, ...instance: T): target is InstanceType<T[number]> {
+    return !!instance.find(i => target instanceof i);
+}
+// JSON
+export const _JSON_stringify = JSON.stringify;