rune-ts - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/$Element.d.ts

@@ -43,6 +43,8 @@ export declare class $Element {
     };
-    append(child: $Element | HTMLElement): this;
+    append(...children: ($Element | HTMLElement)[]): this;
     appendTo(parent: $Element | HTMLElement): this;
-    prepend(child: $Element | HTMLElement): this;
+    prepend(...children: ($Element | HTMLElement)[]): this;
     prependTo(parent: $Element | HTMLElement): this;
+    after(...children: ($Element | HTMLElement)[]): this;
+    before(...children: ($Element | HTMLElement)[]): this;
     remove(): this;
@@ -56,2 +58,3 @@ delegate<K extends keyof HTMLElementEventMap>(eventType: K, selector: string, listener: (this: HTMLElement, e: HTMLElementEventMap[K]) => any): this;
     static to$Elements: <T>(elements: Iterable<T> | ArrayLike<T>) => $Element[];
+    static toHTMLElements($elements: ($Element | HTMLElement)[]): HTMLElement[];
     static throwIfNull: (element: HTMLElement | Element | $Element, throwIfNullError?: Error) => $Element;
@@ -58,0 +61,0 @@ }

dist/$Element.js

@@ -188,4 +188,7 @@ "use strict";
     }
-    append(child) {
-        this._element.appendChild($(child)._element);
+    append() {
+        for(var _len = arguments.length, children = new Array(_len), _key = 0; _key < _len; _key++){
+            children[_key] = arguments[_key];
+        }
+        this._element.append(...$Element.toHTMLElements(children));
         return this;
@@ -197,4 +200,7 @@ }
     }
-    prepend(child) {
-        this._element.insertBefore($(child)._element, this._element.firstChild);
+    prepend() {
+        for(var _len = arguments.length, children = new Array(_len), _key = 0; _key < _len; _key++){
+            children[_key] = arguments[_key];
+        }
+        this._element.prepend(...$Element.toHTMLElements(children));
         return this;
@@ -206,2 +212,16 @@ }
     }
+    after() {
+        for(var _len = arguments.length, children = new Array(_len), _key = 0; _key < _len; _key++){
+            children[_key] = arguments[_key];
+        }
+        this._element.after(...$Element.toHTMLElements(children));
+        return this;
+    }
+    before() {
+        for(var _len = arguments.length, children = new Array(_len), _key = 0; _key < _len; _key++){
+            children[_key] = arguments[_key];
+        }
+        this._element.before(...$Element.toHTMLElements(children));
+        return this;
+    }
     remove() {
@@ -233,2 +253,5 @@ this._element.remove();
     }
+    static toHTMLElements($elements) {
+        return $elements.map((child)=>$(child)._element);
+    }
     constructor(element, prev$Element, error){
@@ -248,4 +271,3 @@ _define_property(this, "_element", void 0);
 _define_property($Element, "fromHtml", (htmlStr)=>{
-    htmlStr = htmlStr.trim();
-    return htmlStr.startsWith("<") ? $((0, _elementFromHtml.default)(htmlStr)) : $(document.createElement(htmlStr));
+    return $((0, _elementFromHtml.default)(htmlStr));
 });
@@ -252,0 +274,0 @@ _define_property($Element, "to$Elements", (elements)=>{

dist/Base.d.ts

 export declare abstract class Base {
     protected _element: HTMLElement | null;
+    private _runeElNumber;
+    private _isTempElId;
     protected onMount(): void;
     protected _onMount(): this;
     element(): HTMLElement;
+    protected _getElId(): string;
+    protected _removeTempElId(): this;
     protected _setElement(element: HTMLElement): this;
@@ -7,0 +11,0 @@ addEventListener<K extends keyof HTMLElementEventMap, M extends keyof this>(eventType: K, listener: M, options?: boolean | AddEventListenerOptions): this;

dist/Base.js

@@ -41,2 +41,17 @@ "use strict";
     }
+    _getElId() {
+        if (this.element().id) {
+            return this.element().id;
+        } else {
+            this._isTempElId = true;
+            return this.element().id = "rune-temp-id-".concat(++this._runeElNumber);
+        }
+    }
+    _removeTempElId() {
+        if (this._isTempElId) {
+            this.element().removeAttribute("id");
+            this._isTempElId = false;
+        }
+        return this;
+    }
     _setElement(element) {
@@ -78,3 +93,5 @@ this._element = element;
         _define_property(this, "_element", null);
+        _define_property(this, "_runeElNumber", 0);
+        _define_property(this, "_isTempElId", false);
     }
 }

dist/decorators.d.ts

 import { type Enable } from './Enable';
 export declare function on(eventType: string, selector?: string | ((self: any) => string)): (target: any, propertyKey: string, descriptor: PropertyDescriptor) => void;
-export declare function enable(...Enables: (new (...args: any[]) => Enable<unknown>)[]): (Constructor: any) => void;
+export declare function enable(...Enables: (new (...args: any[]) => Enable<object>)[]): (Constructor: any) => void;

dist/Enable.d.ts

 import { View } from './View';
 import { Base } from './Base';
 type ExtendExtraInterface<T, E> = E extends null ? T : T & E;
-export declare abstract class Enable<T, E = null> extends Base {
+export declare abstract class Enable<T extends object = object, E = null> extends Base {
     view: ExtendExtraInterface<View<T>, E>;
@@ -11,3 +11,3 @@ data: T;
 }
-export declare abstract class EnableWithOptions<T, O, E = null> extends Enable<T, E> {
+export declare abstract class EnableWithOptions<T extends object = object, O = object, E = null> extends Enable<T, E> {
     options?: O;
@@ -14,0 +14,0 @@ constructor(view: ExtendExtraInterface<View<T>, E>, options?: O);

dist/esm/$Element.js

@@ -161,4 +161,7 @@ function _define_property(obj, key, value) {
     }
-    append(child) {
-        this._element.appendChild($(child)._element);
+    append() {
+        for(var _len = arguments.length, children = new Array(_len), _key = 0; _key < _len; _key++){
+            children[_key] = arguments[_key];
+        }
+        this._element.append(...$Element.toHTMLElements(children));
         return this;
@@ -170,4 +173,7 @@ }
     }
-    prepend(child) {
-        this._element.insertBefore($(child)._element, this._element.firstChild);
+    prepend() {
+        for(var _len = arguments.length, children = new Array(_len), _key = 0; _key < _len; _key++){
+            children[_key] = arguments[_key];
+        }
+        this._element.prepend(...$Element.toHTMLElements(children));
         return this;
@@ -179,2 +185,16 @@ }
     }
+    after() {
+        for(var _len = arguments.length, children = new Array(_len), _key = 0; _key < _len; _key++){
+            children[_key] = arguments[_key];
+        }
+        this._element.after(...$Element.toHTMLElements(children));
+        return this;
+    }
+    before() {
+        for(var _len = arguments.length, children = new Array(_len), _key = 0; _key < _len; _key++){
+            children[_key] = arguments[_key];
+        }
+        this._element.before(...$Element.toHTMLElements(children));
+        return this;
+    }
     remove() {
@@ -206,2 +226,5 @@ this._element.remove();
     }
+    static toHTMLElements($elements) {
+        return $elements.map((child)=>$(child)._element);
+    }
     constructor(element, prev$Element, error){
@@ -221,4 +244,3 @@ _define_property(this, "_element", void 0);
 _define_property($Element, "fromHtml", (htmlStr)=>{
-    htmlStr = htmlStr.trim();
-    return htmlStr.startsWith("<") ? $(elementFromHtml(htmlStr)) : $(document.createElement(htmlStr));
+    return $(elementFromHtml(htmlStr));
 });
@@ -225,0 +247,0 @@ _define_property($Element, "to$Elements", (elements)=>{

dist/esm/Base.js

@@ -31,2 +31,17 @@ function _define_property(obj, key, value) {
     }
+    _getElId() {
+        if (this.element().id) {
+            return this.element().id;
+        } else {
+            this._isTempElId = true;
+            return this.element().id = "rune-temp-id-".concat(++this._runeElNumber);
+        }
+    }
+    _removeTempElId() {
+        if (this._isTempElId) {
+            this.element().removeAttribute("id");
+            this._isTempElId = false;
+        }
+        return this;
+    }
     _setElement(element) {
@@ -68,3 +83,5 @@ this._element = element;
         _define_property(this, "_element", null);
+        _define_property(this, "_runeElNumber", 0);
+        _define_property(this, "_isTempElId", false);
     }
 }

dist/esm/Page.js

@@ -17,3 +17,3 @@ function _define_property(obj, key, value) {
     hydrateFromSSR() {
-        return super.hydrateFromSSR(document.querySelector('body [data-rune-view="'.concat(this.constructor.name, '"]')));
+        return super.hydrateFromSSR(document.querySelector('body [data-rune="'.concat(this, '"]')));
     }
@@ -20,0 +20,0 @@ constructor(...args){

dist/esm/rune.js

@@ -14,5 +14,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-unsafe-call */ /* eslint-disable @typescript-eslint/no-unsafe-assignment */ /* eslint-disable @typescript-eslint/no-unsafe-return */ function _define_property(obj, key, value) {
 }
+import { View } from "./View";
 class Rune {
     set(element, instance, Constructor) {
-        return this.weakMap.set(element, this._getMap(element).set(Constructor !== null && Constructor !== void 0 ? Constructor : instance.constructor, instance));
+        return this._weakMap.set(element, this._getMap(element).set(Constructor !== null && Constructor !== void 0 ? Constructor : instance.constructor, instance));
     }
@@ -24,3 +25,3 @@ get(element, Constructor) {
     _getMap(element) {
-        return this.weakMap.get(element) || this.weakMap.set(element, new Map()).get(element);
+        return this._weakMap.get(element) || this._weakMap.set(element, new Map()).get(element);
     }
@@ -30,6 +31,12 @@ getView(element, Constructor) {
     }
+    getUnknownView(element) {
+        return this.get(element, View);
+    }
     constructor(){
-        _define_property(this, "weakMap", new WeakMap());
+        _define_property(this, "_weakMap", new WeakMap());
     }
 }
 export const rune = new Rune();
+if (typeof window !== "undefined") {
+    window.__rune__ = rune;
+}

dist/esm/types/window.d.ts

@@ -6,4 +6,4 @@ export {};
     __RUNE_DATA__: any;
-    __rune_View__: any;
+    __rune__: any;
   }
 }

dist/esm/View.js

@@ -42,3 +42,3 @@ function _define_property(obj, key, value) {
         if (this.subViewsFromTemplate.length > 0) {
-            pipe(zip(this.subViewElements(), this.subViewsFromTemplate), each((param)=>{
+            pipe(zip(this._subViewElements(), this.subViewsFromTemplate), each((param)=>{
                 let [element, view] = param;
@@ -55,5 +55,5 @@ view._setElement(element).hydrate();
                     var _$_parentNode_closest, _$_parentNode;
-                    (_$_parentNode = $(this.element()).parentNode()) === null || _$_parentNode === void 0 ? void 0 : (_$_parentNode_closest = _$_parentNode.closest("[data-rune-view]")) === null || _$_parentNode_closest === void 0 ? void 0 : _$_parentNode_closest.chain((parentViewElement)=>{
+                    (_$_parentNode = $(this.element()).parentNode()) === null || _$_parentNode === void 0 ? void 0 : (_$_parentNode_closest = _$_parentNode.closest("[data-rune]")) === null || _$_parentNode_closest === void 0 ? void 0 : _$_parentNode_closest.chain((parentViewElement)=>{
                         this.parentView = rune.getView(parentViewElement, View);
-                        this.element().dataset.runeViewParent = this.parentView.constructor.name;
+                        this.element().dataset.runeParent = this.parentView.toString();
                         observer.disconnect();
@@ -98,45 +98,56 @@ });
         $(this.element()).setInnerHtml(this._currentInnerHtml());
-        this.hydrateSubViews();
         return this;
     }
     redraw() {
-        return this._makeHtml()._redrawAttributes()._setInnerHtmlFromCurrentInnerHtml();
+        return this._makeHtml()._redrawAttributes()._setInnerHtmlFromCurrentInnerHtml().hydrateSubViews();
     }
     async redrawAsync() {
-        return (await this._makeHtmlAsync())._redrawAttributes()._setInnerHtmlFromCurrentInnerHtml();
+        return (await this._makeHtmlAsync())._redrawAttributes()._setInnerHtmlFromCurrentInnerHtml().hydrateSubViews();
     }
     _subViewSelector(subViewName) {
-        return '[data-rune-view-parent="'.concat(this.constructor.name, '"]').concat(subViewName ? '[data-rune-view="'.concat(subViewName, '"]') : "");
+        return '[data-rune-parent="'.concat(this, '"]:not(#').concat(this._getElId(), ' [data-rune-parent="').concat(this, '"] [data-rune-parent="').concat(this, '"])').concat(subViewName && subViewName !== "View" ? ".".concat(subViewName) : "");
     }
-    subViewElements(subViewName) {
-        return [
+    _subViewElements(subViewName) {
+        const elements = [
             ...this.element().querySelectorAll(this._subViewSelector(subViewName))
         ];
+        this._removeTempElId();
+        return elements;
     }
-    subViewElementsIn(selector, subViewName) {
-        return pipe($(this.element()).findAll(selector), flatMap(($el)=>$el.element().querySelectorAll(this._subViewSelector(subViewName))), toArray);
+    _subViewElementsIn(selector, subViewName) {
+        const elements = pipe($(this.element()).findAll(selector), flatMap(($el)=>$el.element().querySelectorAll(this._subViewSelector(subViewName))), toArray);
+        this._removeTempElId();
+        return elements;
     }
-    subViews(SubView) {
-        return this.subViewElements(SubView.name).map((element)=>{
-            return rune.getView(element, SubView);
-        });
+    _subViews(elements, SubView) {
+        return elements.map((element)=>rune.getView(element, SubView));
     }
+    subViews(SubView, selector) {
+        return selector !== undefined ? this.subViewsIn(selector, SubView) : this._subViews(this._subViewElements(SubView.name), SubView);
+    }
     subViewsIn(selector, SubView) {
-        return this.subViewElementsIn(selector, SubView.name).map((element)=>{
-            return rune.getView(element, SubView);
-        });
+        return this._subViews(this._subViewElementsIn(selector, SubView.name), SubView);
     }
-    subViewElement(subViewName) {
-        return this.element().querySelector(this._subViewSelector(subViewName));
+    _subViewElement(subViewName) {
+        const element = this.element().querySelector(this._subViewSelector(subViewName));
+        this._removeTempElId();
+        return element;
     }
-    subViewElementIn(selector, subViewName) {
+    _subViewElementIn(selector, subViewName) {
         var _$_find;
         var _$_find_element_querySelector;
-        return (_$_find_element_querySelector = (_$_find = $(this.element()).find(selector)) === null || _$_find === void 0 ? void 0 : _$_find.element().querySelector(this._subViewSelector(subViewName))) !== null && _$_find_element_querySelector !== void 0 ? _$_find_element_querySelector : null;
+        const element = (_$_find_element_querySelector = (_$_find = $(this.element()).find(selector)) === null || _$_find === void 0 ? void 0 : _$_find.element().querySelector(this._subViewSelector(subViewName))) !== null && _$_find_element_querySelector !== void 0 ? _$_find_element_querySelector : null;
+        this._removeTempElId();
+        return element;
     }
-    subViewIn(selector, SubView) {
-        const element = this.subViewElementIn(selector, SubView.name);
+    _subView(element, SubView) {
         var _rune_getView;
         return element ? (_rune_getView = rune.getView(element, SubView)) !== null && _rune_getView !== void 0 ? _rune_getView : null : null;
     }
+    subView(SubView, selector) {
+        return selector !== undefined ? this.subViewIn(selector, SubView) : this._subView(this._subViewElement(SubView.name), SubView);
+    }
+    subViewIn(selector, SubView) {
+        return this._subView(this._subViewElementIn(selector, SubView.name), SubView);
+    }
     redrawOnlySubViews() {
@@ -165,4 +176,1 @@ this.subViews(View).filter((view)=>!view.ignoreRefreshOnlySubViewFromParent).forEach((view)=>view.redraw());
 }
-if (typeof window !== "undefined") {
-    window.__rune_View__ = View;
-}

dist/esm/VirtualView.js

@@ -33,2 +33,22 @@ function _define_property(obj, key, value) {
 }
+function _templateObject1() {
+    const data = _tagged_template_literal([
+        "",
+        ""
+    ]);
+    _templateObject1 = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal([
+        "",
+        ""
+    ]);
+    _templateObject2 = function() {
+        return data;
+    };
+    return data;
+}
 import { _escape } from "./lib/_escape";
@@ -38,6 +58,8 @@ import { Base } from "./Base";
 export class VirtualView extends Base {
-    setData(data) {
-        this.data = data;
-        return this;
+    get data() {
+        return this._data;
     }
+    set data(data) {
+        throw TypeError("data property is readonly.");
+    }
     /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ template(data) {
@@ -57,7 +79,6 @@ return html(_templateObject());
     _addRuneAttrs(html) {
-        var _this_parentView;
         if (this.root) return html;
         const { startTag, startTagName } = this._matchStartTag(html);
-        const runeDataset = 'data-rune-view="'.concat(this.constructor.name, '" data-rune-view-parent="').concat((_this_parentView = this.parentView) === null || _this_parentView === void 0 ? void 0 : _this_parentView.constructor.name, '"');
-        html = startTag.includes('class="') ? html.replace('class="', "".concat(runeDataset, ' class="').concat(this.constructor.name, " ")) : startTag.includes("class='") ? html.replace("class='", "".concat(runeDataset, " class='").concat(this.constructor.name, " ")) : html.replace("<".concat(startTagName), "<".concat(startTagName, " ").concat(runeDataset, ' class="').concat(this.constructor.name, '"'));
+        const runeDataset = 'data-rune="'.concat(this, '" data-rune-parent="').concat(this.parentView, '"');
+        html = startTag.includes('class="') ? html.replace('class="', "".concat(runeDataset, ' class="').concat(this, " ")) : startTag.includes("class='") ? html.replace("class='", "".concat(runeDataset, " class='").concat(this, " ")) : html.replace("<".concat(startTagName), "<".concat(startTagName, " ").concat(runeDataset, ' class="').concat(this, '"'));
         return html;
@@ -78,4 +99,3 @@ }
         this.subViewsFromTemplate = [];
-        const html = this.template(this.data);
-        return this._resetCurrentHtml(html instanceof Html ? html.make(this) : html);
+        return this._resetCurrentHtml(html(_templateObject1(), this.template(this.data)).make(this));
     }
@@ -85,4 +105,3 @@ async _makeHtmlAsync() {
         this.subViewsFromTemplate = [];
-        const html = await this.templateAsync(this.data);
-        return this._resetCurrentHtml(html instanceof Html ? await html.makeAsync(this) : html);
+        return this._resetCurrentHtml(await html(_templateObject2(), await this.templateAsync(this.data)).makeAsync(this));
     }
@@ -98,3 +117,3 @@ toHtml() {
         _define_property(this, "root", false);
-        _define_property(this, "data", void 0);
+        _define_property(this, "_data", void 0);
         _define_property(this, "parentView", null);
@@ -104,3 +123,3 @@ _define_property(this, "subViewsFromTemplate", []);
         _define_property(this, "_currentHtml", null);
-        this.data = data;
+        this._data = data;
     }
@@ -107,0 +126,0 @@ }

dist/Layout.d.ts

 import { VirtualView } from './VirtualView';
 import { Page } from './Page';
-export declare class Layout<T> extends VirtualView<T> {
+export declare class Layout<T extends object> extends VirtualView<T> {
     root: boolean;
-    page: Page<unknown>;
+    page: Page<object>;
     path: string;
-    constructor(page: Page<unknown>, layoutData: T);
+    constructor(page: Page<object>, layoutData: T);
     template(data: T): import("./VirtualView").Html;
 }

dist/Page.d.ts

 import { View } from './View';
 import { Layout } from './Layout';
-export declare class Page<T> extends View<T> {
-    layout: Layout<unknown> | null;
+export declare class Page<T extends object> extends View<T> {
+    layout: Layout<object> | null;
     hydrateFromSSR(): this;
 }

dist/Page.js

@@ -27,3 +27,3 @@ "use strict";
     hydrateFromSSR() {
-        return super.hydrateFromSSR(document.querySelector('body [data-rune-view="'.concat(this.constructor.name, '"]')));
+        return super.hydrateFromSSR(document.querySelector('body [data-rune="'.concat(this, '"]')));
     }
@@ -30,0 +30,0 @@ constructor(...args){

dist/rune.d.ts

@@ -0,4 +1,5 @@
+import { View } from './View';
 type Constructor = new (...args: any) => any;
 declare class Rune {
-    weakMap: WeakMap<object, any>;
+    private _weakMap;
     set(element: HTMLElement | EventTarget, instance: any, Constructor?: Constructor): WeakMap<object, any>;
@@ -8,4 +9,5 @@ get<T extends Constructor>(element: HTMLElement | EventTarget, Constructor: T): InstanceType<typeof Constructor> | undefined;
     getView<T extends Constructor>(element: HTMLElement | EventTarget, Constructor: T): InstanceType<typeof Constructor> | undefined;
+    getUnknownView(element: HTMLElement | EventTarget): View<object> | undefined;
 }
 export declare const rune: Rune;
 export {};

dist/rune.js

@@ -11,2 +11,3 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-unsafe-call */ /* eslint-disable @typescript-eslint/no-unsafe-assignment */ /* eslint-disable @typescript-eslint/no-unsafe-return */ "use strict";
 });
+const _View = require("./View");
 function _define_property(obj, key, value) {
@@ -27,3 +28,3 @@ if (key in obj) {
     set(element, instance, Constructor) {
-        return this.weakMap.set(element, this._getMap(element).set(Constructor !== null && Constructor !== void 0 ? Constructor : instance.constructor, instance));
+        return this._weakMap.set(element, this._getMap(element).set(Constructor !== null && Constructor !== void 0 ? Constructor : instance.constructor, instance));
     }
@@ -35,3 +36,3 @@ get(element, Constructor) {
     _getMap(element) {
-        return this.weakMap.get(element) || this.weakMap.set(element, new Map()).get(element);
+        return this._weakMap.get(element) || this._weakMap.set(element, new Map()).get(element);
     }
@@ -41,6 +42,12 @@ getView(element, Constructor) {
     }
+    getUnknownView(element) {
+        return this.get(element, _View.View);
+    }
     constructor(){
-        _define_property(this, "weakMap", new WeakMap());
+        _define_property(this, "_weakMap", new WeakMap());
     }
 }
 const rune = new Rune();
+if (typeof window !== "undefined") {
+    window.__rune__ = rune;
+}

dist/types/window.d.ts

@@ -6,4 +6,4 @@ export {};
     __RUNE_DATA__: any;
-    __rune_View__: any;
+    __rune__: any;
   }
 }

dist/View.d.ts

 import { VirtualView } from './VirtualView';
 import { type Enable } from './Enable';
-export declare class View<T> extends VirtualView<T> {
+export declare class View<T extends object> extends VirtualView<T> {
     subViewsFromTemplate: View<T>[];
@@ -21,25 +21,28 @@ ignoreRefreshOnlySubViewFromParent: boolean;
     private _subViewSelector;
-    protected subViewElements(subViewName?: string): HTMLElement[];
-    protected subViewElementsIn(selector: string, subViewName: string): HTMLElement[];
-    protected subViews<T extends ViewConstructor>(SubView: T): InstanceType<T>[];
+    private _subViewElements;
+    private _subViewElementsIn;
+    private _subViews;
+    protected subViews<T extends ViewConstructor>(SubView: T, selector?: string): InstanceType<T>[];
     protected subViewsIn<T extends ViewConstructor>(selector: string, SubView: T): InstanceType<T>[];
-    protected subViewElement(subViewName?: string): HTMLElement | null;
-    protected subViewElementIn(selector: string, subViewName: string): HTMLElement | null;
+    private _subViewElement;
+    private _subViewElementIn;
+    private _subView;
+    protected subView<T extends ViewConstructor>(SubView: T, selector?: string): InstanceType<T> | null;
     protected subViewIn<T extends ViewConstructor>(selector: string, SubView: T): InstanceType<T> | null;
-    redrawOnlySubViews(): this;
-    protected _reservedEnables: Enable<unknown>[];
-    static _ReservedEnables: (new (...args: any[]) => Enable<unknown>)[];
+    protected redrawOnlySubViews(): this;
+    protected _reservedEnables: Enable<object>[];
+    static _ReservedEnables: (new (...args: any[]) => Enable<object>)[];
 }
-type ViewConstructor = new (...args: any[]) => View<unknown>;
+type ViewConstructor = new (...args: any[]) => View<object>;
 export interface HasReservedEnables extends ViewConstructor {
-    _ReservedEnables: (new (...args: any[]) => Enable<unknown>)[];
+    _ReservedEnables: (new (...args: any[]) => Enable<object>)[];
 }
-export declare class ViewWithOptions<T, O> extends View<T> {
+export declare class ViewWithOptions<T extends object, O = object> extends View<T> {
     options?: O;
     constructor(data: T, options?: O);
 }
-export declare class ListView<T> extends View<T[]> {
+export declare class ListView<T extends object> extends View<T[]> {
 }
-export declare class ListViewWithOptions<T, O> extends ViewWithOptions<T[], O> {
+export declare class ListViewWithOptions<T extends object, O> extends ViewWithOptions<T[], O> {
 }
 export {};

dist/View.js

@@ -72,3 +72,3 @@ "use strict";
         if (this.subViewsFromTemplate.length > 0) {
-            (0, _core.pipe)((0, _core.zip)(this.subViewElements(), this.subViewsFromTemplate), (0, _core.each)((param)=>{
+            (0, _core.pipe)((0, _core.zip)(this._subViewElements(), this.subViewsFromTemplate), (0, _core.each)((param)=>{
                 let [element, view] = param;
@@ -85,5 +85,5 @@ view._setElement(element).hydrate();
                     var _$_parentNode_closest, _$_parentNode;
-                    (_$_parentNode = (0, _$Element.$)(this.element()).parentNode()) === null || _$_parentNode === void 0 ? void 0 : (_$_parentNode_closest = _$_parentNode.closest("[data-rune-view]")) === null || _$_parentNode_closest === void 0 ? void 0 : _$_parentNode_closest.chain((parentViewElement)=>{
+                    (_$_parentNode = (0, _$Element.$)(this.element()).parentNode()) === null || _$_parentNode === void 0 ? void 0 : (_$_parentNode_closest = _$_parentNode.closest("[data-rune]")) === null || _$_parentNode_closest === void 0 ? void 0 : _$_parentNode_closest.chain((parentViewElement)=>{
                         this.parentView = _rune.rune.getView(parentViewElement, View);
-                        this.element().dataset.runeViewParent = this.parentView.constructor.name;
+                        this.element().dataset.runeParent = this.parentView.toString();
                         observer.disconnect();
@@ -128,45 +128,56 @@ });
         (0, _$Element.$)(this.element()).setInnerHtml(this._currentInnerHtml());
-        this.hydrateSubViews();
         return this;
     }
     redraw() {
-        return this._makeHtml()._redrawAttributes()._setInnerHtmlFromCurrentInnerHtml();
+        return this._makeHtml()._redrawAttributes()._setInnerHtmlFromCurrentInnerHtml().hydrateSubViews();
     }
     async redrawAsync() {
-        return (await this._makeHtmlAsync())._redrawAttributes()._setInnerHtmlFromCurrentInnerHtml();
+        return (await this._makeHtmlAsync())._redrawAttributes()._setInnerHtmlFromCurrentInnerHtml().hydrateSubViews();
     }
     _subViewSelector(subViewName) {
-        return '[data-rune-view-parent="'.concat(this.constructor.name, '"]').concat(subViewName ? '[data-rune-view="'.concat(subViewName, '"]') : "");
+        return '[data-rune-parent="'.concat(this, '"]:not(#').concat(this._getElId(), ' [data-rune-parent="').concat(this, '"] [data-rune-parent="').concat(this, '"])').concat(subViewName && subViewName !== "View" ? ".".concat(subViewName) : "");
     }
-    subViewElements(subViewName) {
-        return [
+    _subViewElements(subViewName) {
+        const elements = [
             ...this.element().querySelectorAll(this._subViewSelector(subViewName))
         ];
+        this._removeTempElId();
+        return elements;
     }
-    subViewElementsIn(selector, subViewName) {
-        return (0, _core.pipe)((0, _$Element.$)(this.element()).findAll(selector), (0, _core.flatMap)(($el)=>$el.element().querySelectorAll(this._subViewSelector(subViewName))), _core.toArray);
+    _subViewElementsIn(selector, subViewName) {
+        const elements = (0, _core.pipe)((0, _$Element.$)(this.element()).findAll(selector), (0, _core.flatMap)(($el)=>$el.element().querySelectorAll(this._subViewSelector(subViewName))), _core.toArray);
+        this._removeTempElId();
+        return elements;
     }
-    subViews(SubView) {
-        return this.subViewElements(SubView.name).map((element)=>{
-            return _rune.rune.getView(element, SubView);
-        });
+    _subViews(elements, SubView) {
+        return elements.map((element)=>_rune.rune.getView(element, SubView));
     }
+    subViews(SubView, selector) {
+        return selector !== undefined ? this.subViewsIn(selector, SubView) : this._subViews(this._subViewElements(SubView.name), SubView);
+    }
     subViewsIn(selector, SubView) {
-        return this.subViewElementsIn(selector, SubView.name).map((element)=>{
-            return _rune.rune.getView(element, SubView);
-        });
+        return this._subViews(this._subViewElementsIn(selector, SubView.name), SubView);
     }
-    subViewElement(subViewName) {
-        return this.element().querySelector(this._subViewSelector(subViewName));
+    _subViewElement(subViewName) {
+        const element = this.element().querySelector(this._subViewSelector(subViewName));
+        this._removeTempElId();
+        return element;
     }
-    subViewElementIn(selector, subViewName) {
+    _subViewElementIn(selector, subViewName) {
         var _$_find;
         var _$_find_element_querySelector;
-        return (_$_find_element_querySelector = (_$_find = (0, _$Element.$)(this.element()).find(selector)) === null || _$_find === void 0 ? void 0 : _$_find.element().querySelector(this._subViewSelector(subViewName))) !== null && _$_find_element_querySelector !== void 0 ? _$_find_element_querySelector : null;
+        const element = (_$_find_element_querySelector = (_$_find = (0, _$Element.$)(this.element()).find(selector)) === null || _$_find === void 0 ? void 0 : _$_find.element().querySelector(this._subViewSelector(subViewName))) !== null && _$_find_element_querySelector !== void 0 ? _$_find_element_querySelector : null;
+        this._removeTempElId();
+        return element;
     }
-    subViewIn(selector, SubView) {
-        const element = this.subViewElementIn(selector, SubView.name);
+    _subView(element, SubView) {
         var _rune_getView;
         return element ? (_rune_getView = _rune.rune.getView(element, SubView)) !== null && _rune_getView !== void 0 ? _rune_getView : null : null;
     }
+    subView(SubView, selector) {
+        return selector !== undefined ? this.subViewIn(selector, SubView) : this._subView(this._subViewElement(SubView.name), SubView);
+    }
+    subViewIn(selector, SubView) {
+        return this._subView(this._subViewElementIn(selector, SubView.name), SubView);
+    }
     redrawOnlySubViews() {
@@ -195,4 +206,1 @@ this.subViews(View).filter((view)=>!view.ignoreRefreshOnlySubViewFromParent).forEach((view)=>view.redraw());
 }
-if (typeof window !== "undefined") {
-    window.__rune_View__ = View;
-}

dist/VirtualView.d.ts

 import { Base } from './Base';
-export declare class VirtualView<T> extends Base {
+export declare class VirtualView<T extends object> extends Base {
     root: boolean;
-    data: T;
-    parentView: VirtualView<unknown> | null;
-    subViewsFromTemplate: VirtualView<unknown>[];
+    private readonly _data;
+    parentView: VirtualView<object> | null;
+    subViewsFromTemplate: VirtualView<object>[];
     renderCount: number;
     protected _currentHtml: string | null;
+    get data(): T;
+    set data(data: T);
     constructor(data: T);
-    setData(data: T): this;
-    template(data: T): Html | string;
-    templateAsync(data: T): Promise<Html | string>;
+    protected template(data: T): Html;
+    templateAsync(data: T): Promise<Html>;
     protected _matchStartTag(html: string): {
@@ -33,4 +34,4 @@ startTag: string;
     constructor(templateStrs: TemplateStringsArray, templateVals: unknown[]);
-    make(virtualView: VirtualView<unknown>): string;
-    makeAsync(virtualView: VirtualView<unknown>): Promise<string>;
+    make(virtualView: VirtualView<object>): string;
+    makeAsync(virtualView: VirtualView<object>): Promise<string>;
     private _make;
@@ -37,0 +38,0 @@ private _wrapArray;

dist/VirtualView.js

@@ -66,7 +66,29 @@ "use strict";
 }
+function _templateObject1() {
+    const data = _tagged_template_literal([
+        "",
+        ""
+    ]);
+    _templateObject1 = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal([
+        "",
+        ""
+    ]);
+    _templateObject2 = function() {
+        return data;
+    };
+    return data;
+}
 class VirtualView extends _Base.Base {
-    setData(data) {
-        this.data = data;
-        return this;
+    get data() {
+        return this._data;
     }
+    set data(data) {
+        throw TypeError("data property is readonly.");
+    }
     /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ template(data) {
@@ -86,7 +108,6 @@ return html(_templateObject());
     _addRuneAttrs(html) {
-        var _this_parentView;
         if (this.root) return html;
         const { startTag, startTagName } = this._matchStartTag(html);
-        const runeDataset = 'data-rune-view="'.concat(this.constructor.name, '" data-rune-view-parent="').concat((_this_parentView = this.parentView) === null || _this_parentView === void 0 ? void 0 : _this_parentView.constructor.name, '"');
-        html = startTag.includes('class="') ? html.replace('class="', "".concat(runeDataset, ' class="').concat(this.constructor.name, " ")) : startTag.includes("class='") ? html.replace("class='", "".concat(runeDataset, " class='").concat(this.constructor.name, " ")) : html.replace("<".concat(startTagName), "<".concat(startTagName, " ").concat(runeDataset, ' class="').concat(this.constructor.name, '"'));
+        const runeDataset = 'data-rune="'.concat(this, '" data-rune-parent="').concat(this.parentView, '"');
+        html = startTag.includes('class="') ? html.replace('class="', "".concat(runeDataset, ' class="').concat(this, " ")) : startTag.includes("class='") ? html.replace("class='", "".concat(runeDataset, " class='").concat(this, " ")) : html.replace("<".concat(startTagName), "<".concat(startTagName, " ").concat(runeDataset, ' class="').concat(this, '"'));
         return html;
@@ -107,4 +128,3 @@ }
         this.subViewsFromTemplate = [];
-        const html = this.template(this.data);
-        return this._resetCurrentHtml(html instanceof Html ? html.make(this) : html);
+        return this._resetCurrentHtml(html(_templateObject1(), this.template(this.data)).make(this));
     }
@@ -114,4 +134,3 @@ async _makeHtmlAsync() {
         this.subViewsFromTemplate = [];
-        const html = await this.templateAsync(this.data);
-        return this._resetCurrentHtml(html instanceof Html ? await html.makeAsync(this) : html);
+        return this._resetCurrentHtml(await html(_templateObject2(), await this.templateAsync(this.data)).makeAsync(this));
     }
@@ -127,3 +146,3 @@ toHtml() {
         _define_property(this, "root", false);
-        _define_property(this, "data", void 0);
+        _define_property(this, "_data", void 0);
         _define_property(this, "parentView", null);
@@ -133,3 +152,3 @@ _define_property(this, "subViewsFromTemplate", []);
         _define_property(this, "_currentHtml", null);
-        this.data = data;
+        this._data = data;
     }
@@ -136,0 +155,0 @@ }

package.json

 {
   "name": "rune-ts",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Rune Core Library",
@@ -8,6 +8,12 @@ "engines": {
   },
+  "homepage": "https://marpple.github.io/rune/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marpple/rune"
+  },
+  "bugs": {
+    "url": "https://github.com/marpple/rune/issues"
+  },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "unpkg": "dist/",
-  "jsdelivr": "dist/",
   "license": "Apache-2.0",
@@ -14,0 +20,0 @@ "files": [

README.md

@@ -0,1 +1,10 @@
+# Rune - Web API based Front-end SDK
+Rune은 품질 좋은 프론트엔드 앱 개발을 위한 빠르고 견고한 라이브러리이자 최신 웹 기술 기반의 SDK입니다.
+
+- Type-safe Generic Views & Enable
+- 단일 컴포넌트 Server Side Rendering
+- 유려하게 동작하는 UI 컴포넌트 개발 키트
+- 높은 이식성, 고성능
+- 객체지향 프로그래밍 기반 아키텍쳐 제공
+
 # Getting Started
@@ -7,3 +16,8 @@ ```shell
 
-# SettingsView
+# Documentation
+- [Website](https://marpple.github.io/rune/)
+- [What is Rune?](https://marpple.github.io/rune/guide/what-is-rune.html)
+- [Tutorial](https://marpple.github.io/rune/tutorial/view.html)
+
+# Example
 ```typescript
@@ -15,3 +29,3 @@ interface Setting {
 
-class SettingsView extends ListView<Setting> {
+class SettingsView extends View<Setting[]> {
   override template() {
@@ -24,12 +38,10 @@ return html`
         </div>
-        <div class="body">
-          ${this.data.map(
-            (setting) => html`
-              <div class="setting-item">
-                <span class="title">${setting.title}</span>
-                ${new SwitchView(setting)}
-              </div>
-            `,
-          )}
-        </div>
+        <ul class="body">
+          ${this.data.map((setting) => html`
+            <li>
+              <span class="title">${setting.title}</span>
+              ${new SwitchView(setting)}
+            </li>
+          `)}
+        </ul>
       </div>
@@ -48,3 +60,3 @@ `;
   @on('switch:change', '> .body')
-  settingViewChanged() {
+  private _changed() {
     this.subViewIn('> .header', SwitchView)!.setOn(this.isAllChecked());
@@ -57,6 +69,2 @@ }
 }
-```
-
-# DOCS
-- [RUNE VIEW TUTORIAL](https://github.com/marpple/Rune/blob/main/docs/core/rune.View/%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC.md)
-- [RUNE $ TUTORIAL](https://github.com/marpple/Rune/blob/main/docs/core/rune.%24/%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC.md)
+```

New alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

276986

increased by39.98%

Number of package files

134

increased by7.2%

Lines of code

2928

increased by5.13%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

65

increased by12.07%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

No dependency changes