diff --git a/dist/index.d.ts b/dist/index.d.ts index 9d75303..6364127 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -1,20 +1,13 @@ -import { Attributes, Events, Func, Init, Prop, States, Subscribers } from "./tsimp.types"; -declare class TSimp { - /**Initialize the element by defining its type, parent(query-selector), classes and id*/ +import { Attributes, Events, Func, Init, Prop, States, Subscribers } from "../types"; +declare class Criya { init: Init; - /**Define the text, html or value(attribute) of the element */ prop: Prop; - /**Add some events that the element will listen to like click, input etc */ events: Events; - /**Define the attributes of the element */ attr: Attributes; - /**The actual physical element present in the dom */ domElement: HTMLElement | undefined; - /**The state object, contains all the states and their current values */ states: States; pseudoStates: States; - /**List of all the subscribers and the states they are subscribed to */ - subscribers: Subscribers; + subscribers: Subscribers; private onmount; private onunmount; private onsubscribed; @@ -22,61 +15,25 @@ declare class TSimp { private effects; private renderCondition; constructor(init: Init, prop?: Prop, events?: Events, attr?: Attributes); - /**Converts the virtual element into a physical element */ render(): void; - /**Append the element to the DOM */ mount(): this; - /**Remove the element from the DOM */ unMount(): void; private _directMount; - /**Check if this element is in the DOM */ isMount(): boolean; - /**Combines render and mount methods and returns the element */ make(): this; - /**Make an element subscribe to the other so that it can access its states as pseudo-states. - * @param subscriber - the element which will access the states by subscribing to other. - * @param main - the element that'll share its states. - * @param forStates - States of the `main` element to be shared, leave the array empty to trigger all. - */ - static subscribe(subscriber: TSimp, main: TSimp, forStates: string[]): void; - /**States are internal variables that when change automatically update their special references in some specific properties, i.e., `html, text, css, value, class, id` - * @param stateName - name of the state - * @param initialValue - initial value of the state - * @returns Two functions in an array, one to get state (non reactive) another to set state - */ + static subscribe(subscriber: Criya, main: Criya, forStates: string[]): void; state(stateName: string, initialValue: T): [(() => T), ((newVal: T | Func) => void)]; - /** - * Effects are functions that get called when some states or pseudoStates (dependencies) change - * @param func - this function will get called when the dependencies change - * @param dependencyArray - add states that will affect the effect, examples: - * - `['$count$', '%color%']` - * - `['f']` - * - `['e']` - * @param onFirst - `default: true`, by default every effect runs on its first render whether the deps change or not. - * */ effect(func: CallableFunction, dependencyArray: string[], onFirst?: boolean): void; - /**Define a condition for when an element should be in the DOM - * @param condition - function or a text condition that'll return boolean signifying mount or not, eg: - * - Function - `putIf(() => state() > 2)` - * - Text - `putIf('$state$ > 2')` - * - Conditions can include pseudo-states also - * @param stick - if true, the element will be in its position after remounting. Bydefault: `false` - * @returns a [getter and setter] (just like `.state` does) for the "sticky" state - */ putIf(condition: ((() => boolean) | string), stick?: boolean): [() => boolean, (newVal: boolean | Func) => void]; - /**Called when the element is added to the dom */ onMount(func: ((didMount?: boolean) => void)): void; - /**Called when the element is removed from the dom */ onUnmount(func: CallableFunction): void; - /**Called on the element to which the subscriber is subscribing when subscription is added */ onNewSubscriber(func: CallableFunction): void; - /**Called on the subscriber element when subscription is added */ onSubscribed(func: CallableFunction): void; private getState; private getPState; private formatString; private stateExtracter; } -declare const subscribe: typeof TSimp.subscribe; +declare const subscribe: typeof Criya.subscribe; export { subscribe }; -export default TSimp; +export default Criya; diff --git a/dist/index.js b/dist/index.js index 308e96b..9bb0fbe 100644 --- a/dist/index.js +++ b/dist/index.js @@ -4,20 +4,18 @@ const regex = { pStateExp: /%[a-zA-Z0-9-]+%/g, both: /\$[a-zA-Z0-9-]+\$ | %[a-zA-Z0-9-]+%/g }; -class TSimp { +class Criya { constructor(init, prop, events, attr) { - this.init = init; // { type, parent, class("class1 class2"), id } - this.prop = prop; // { text, html, css, value } - this.events = events; // { event: e => e.target.value } - this.attr = attr; // { attributes (eg. title, type) } - this.states = {}; // { "nameOfState": valueOfState } - this.pseudoStates = {}; // --dito-- - this.subscribers = []; // [ { subscriber: El, states: [] } ] - this.effects = []; // [ { func(), deps[], ranOnce:false, onFirst:boolean, currentStates[] } ] - this.renderCondition = () => true; // by default no condition + this.init = init; + this.prop = prop; + this.events = events; + this.attr = attr; + this.states = {}; + this.pseudoStates = {}; + this.subscribers = []; + this.effects = []; + this.renderCondition = () => true; } - // dom methods: - /**Converts the virtual element into a physical element */ render() { this.domElement = this.domElement ? this.domElement : document.createElement(this.init.type); if (this.init.class) { @@ -33,7 +31,6 @@ class TSimp { } if (this.events) { Object.keys(this.events).forEach(event => { - // @ts-ignore this.domElement.addEventListener(event, this.events[event]); }); } @@ -50,7 +47,6 @@ class TSimp { const css = this.prop.css; if (this.prop.css) { for (let property of Object.keys(this.prop.css)) { - //@ts-ignore this.domElement.style[property] = this.formatString(css[property]); } } @@ -105,7 +101,6 @@ class TSimp { }); } } - /**Append the element to the DOM */ mount() { if (this.renderCondition() && this.isMount()) return this; @@ -137,7 +132,6 @@ class TSimp { this._directMount(parent); return this; } - /**Remove the element from the DOM */ unMount() { if (this.onunmount) this.onunmount(); @@ -151,7 +145,6 @@ class TSimp { if (this.domElement) parent.appendChild(this.domElement); } - /**Check if this element is in the DOM */ isMount() { let parent = document.querySelector(this.init.parent); if (!parent) @@ -160,17 +153,10 @@ class TSimp { throw Error('No DOMElement attached :('); return Array.from(parent.children).indexOf(this.domElement) > -1; } - /**Combines render and mount methods and returns the element */ make() { this.render(); return this.mount(); } - // out-of-the-box-feature methods - /**Make an element subscribe to the other so that it can access its states as pseudo-states. - * @param subscriber - the element which will access the states by subscribing to other. - * @param main - the element that'll share its states. - * @param forStates - States of the `main` element to be shared, leave the array empty to trigger all. - */ static subscribe(subscriber, main, forStates) { forStates = forStates.length == 0 ? Object.keys(main.states) @@ -184,16 +170,10 @@ class TSimp { if (subscriber.onsubscribed) subscriber.onsubscribed(); } - /**States are internal variables that when change automatically update their special references in some specific properties, i.e., `html, text, css, value, class, id` - * @param stateName - name of the state - * @param initialValue - initial value of the state - * @returns Two functions in an array, one to get state (non reactive) another to set state - */ state(stateName, initialValue) { this.states[stateName] = initialValue; const setState = (newVal) => { let stateValue; - //@ts-ignore if (typeof newVal == 'function') stateValue = newVal(this.getState(stateName)); else @@ -209,15 +189,6 @@ class TSimp { const stateGetter = () => this.getState(stateName); return [stateGetter, setState]; } - /** - * Effects are functions that get called when some states or pseudoStates (dependencies) change - * @param func - this function will get called when the dependencies change - * @param dependencyArray - add states that will affect the effect, examples: - * - `['$count$', '%color%']` - * - `['f']` - * - `['e']` - * @param onFirst - `default: true`, by default every effect runs on its first render whether the deps change or not. - * */ effect(func, dependencyArray, onFirst = true) { if (dependencyArray[0] == 'f' || dependencyArray[0] == 'e') { this.effects.push({ @@ -235,14 +206,6 @@ class TSimp { ranOnce: false, onFirst, currentStates }); } - /**Define a condition for when an element should be in the DOM - * @param condition - function or a text condition that'll return boolean signifying mount or not, eg: - * - Function - `putIf(() => state() > 2)` - * - Text - `putIf('$state$ > 2')` - * - Conditions can include pseudo-states also - * @param stick - if true, the element will be in its position after remounting. Bydefault: `false` - * @returns a [getter and setter] (just like `.state` does) for the "sticky" state - */ putIf(condition, stick = false) { if (typeof condition == 'string') { this.renderCondition = () => eval(this.formatString(condition)); @@ -251,24 +214,18 @@ class TSimp { this.renderCondition = condition; return this.state('__stick__', stick); } - // inbuilt events - /**Called when the element is added to the dom */ onMount(func) { this.onmount = func; } - /**Called when the element is removed from the dom */ onUnmount(func) { this.onunmount = func; } - /**Called on the element to which the subscriber is subscribing when subscription is added */ onNewSubscriber(func) { this.onnewsubscriber = func; } - /**Called on the subscriber element when subscription is added */ onSubscribed(func) { this.onsubscribed = func; } - // util methods getState(stateName) { return this.states[stateName]; } @@ -280,7 +237,6 @@ class TSimp { if (!checkForOperation(text)) return this.stateExtracter(text); const operations = text.match(regex.stateOperateExp); - //@ts-ignore - operations is not null, cause we are already checking for it (look up) for (let rawOperation of operations) { let operation = rawOperation.replace(/{{|}}/g, ''); operation = this.stateExtracter(operation); @@ -326,9 +282,9 @@ class TSimp { return text; } } -const subscribe = TSimp.subscribe; +const subscribe = Criya.subscribe; export { subscribe }; -export default TSimp; +export default Criya; function checkForOperation(text) { return regex.stateOperateExp.test(text); } diff --git a/package.json b/package.json index 198a17c..e2737f0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "criya", - "version": "1.3.9", + "version": "1.4.0", "description": "", "main": "./dist/index.js", "repository": { diff --git a/src/index.ts b/src/index.ts index b53fdb9..51283e3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,4 @@ -import { Attributes, Effects, Events, Func, Init, Prop, States, Subscribers } from "./tsimp.types"; +import { Attributes, Effects, Events, Func, Init, Prop, States, Subscribers } from "../types"; const regex = { stateOperateExp: /{{[a-zA-Z0-9$%+\-*/()\[\]<>?:="'^.! ]+}}/g, @@ -7,7 +7,7 @@ const regex = { both: /\$[a-zA-Z0-9-]+\$ | %[a-zA-Z0-9-]+%/g } -class TSimp { +class Criya { /**Initialize the element by defining its type, parent(query-selector), classes and id*/ init:Init; @@ -22,7 +22,7 @@ class TSimp { /**The state object, contains all the states and their current values */ states:States; pseudoStates:States; /**List of all the subscribers and the states they are subscribed to */ - subscribers:Subscribers; + subscribers:Subscribers; private onmount:CallableFunction|undefined; private onunmount:CallableFunction|undefined; private onsubscribed: CallableFunction|undefined; private onnewsubscriber: CallableFunction|undefined; @@ -195,7 +195,7 @@ class TSimp { * @param main - the element that'll share its states. * @param forStates - States of the `main` element to be shared, leave the array empty to trigger all. */ - static subscribe(subscriber:TSimp, main:TSimp, forStates:string[]) { + static subscribe(subscriber:Criya, main:Criya, forStates:string[]) { forStates = forStates.length == 0 ? Object.keys(main.states) : forStates.filter(state => main.states[state] != undefined); @@ -354,10 +354,10 @@ class TSimp { } } -const subscribe = TSimp.subscribe; +const subscribe = Criya.subscribe; export { subscribe }; -export default TSimp; +export default Criya; function checkForOperation(text:string) { return regex.stateOperateExp.test(text); diff --git a/tsconfig.json b/tsconfig.json index a7743a1..6516375 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -50,7 +50,7 @@ // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ "outDir": "./dist", /* Specify an output folder for all emitted files. */ - // "removeComments": true, /* Disable emitting comments. */ + "removeComments": true, /* Disable emitting comments. */ // "noEmit": true, /* Disable emitting files from a compilation. */ // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ diff --git a/src/tsimp.types.d.ts b/types.d.ts similarity index 100% rename from src/tsimp.types.d.ts rename to types.d.ts