├── .eslintignore
├── .eslintrc.cjs
├── .github
└── workflows
│ └── build.yml
├── .gitignore
├── .prettierignore
├── Inter.png
├── LICENSE
├── README.md
├── builder.js
├── builderconfig.js
├── core
├── ajax
│ ├── errors.js
│ └── index.js
├── helpers.js
├── ref
│ ├── errors.js
│ └── index.js
├── renderif
│ ├── errors.js
│ └── index.js
├── renderlist
│ ├── errors.js
│ └── index.js
├── template
│ ├── errors.js
│ └── index.js
└── toattrs
│ ├── errors.js
│ └── index.js
├── inter.js
├── inter.m.d.ts
├── inter.m.js
├── inter.min.js
├── mitpic.svg
├── package-lock.json
├── package.json
├── prettierrc.json
└── types
├── ajax.d.ts
├── ref.d.ts
├── renderif.d.ts
├── renderlist.d.ts
├── template.d.ts
└── toattrs.d.ts
/.eslintignore:
--------------------------------------------------------------------------------
1 | # The files which will be ignored by Eslint.
2 |
3 | inter.js
4 | inter.min.js
5 | inter-test.js
6 | test.js
7 | .eslintrc.js
8 | node_modules
9 | .vscode
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true,
4 | es6: true,
5 | node: true,
6 | },
7 | extends: "eslint:recommended",
8 | rules: {
9 | quotes: ["warn", "double"],
10 | "no-var": "error",
11 | "no-alert": "error",
12 | camelcase: "error",
13 | "prefer-const": "warn",
14 | "prefer-template": "error",
15 | "getter-return": "error",
16 | "no-inner-declarations": "off",
17 | },
18 | parserOptions: {
19 | ecmaVersion: "latest",
20 | sourceType: "module",
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
1 | name: Build
2 | on:
3 | push:
4 | branches: [main]
5 |
6 | jobs:
7 | build:
8 | runs-on: ubuntu-latest
9 | steps:
10 | - name: Checkout version
11 | uses: actions/checkout@v3
12 | - name: Use Node.js
13 | uses: actions/setup-node@v4
14 | with:
15 | node-version: "20"
16 | cache: "npm"
17 | - name: Install Dependencies
18 | run: npm install
19 | - name: Lint
20 | run: npm run lint
21 | - name: Build Inter
22 | run: npm run build
23 | - name: Prettify
24 | run: npm run prettify
25 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | inter-test.js
3 | test.js
4 | inter-test.html
5 | Thumbs.db
6 | node_modules
7 | .vscode
8 |
9 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Files which won't be formated
2 |
3 | inter.min.js
4 |
--------------------------------------------------------------------------------
/Inter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/interjs/inter/bbcf69ca6d4e66b35a9091b9fd0776a7d879003b/Inter.png
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 DenisPower1
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
6 |
7 |
8 |
9 |
10 |
31 |
32 |
33 |
34 | **WARNING**: The v3 is being pushed on the [v3 branch](https://github.com/interjs/inter/tree/v3/core) check it out.
35 |
36 | Inter is a Javascript framework designed to build highly interactive front-end web applications.
37 | It's: **simple**, **intuitive** and **powerful**.
38 |
39 | # No complex setup
40 |
41 | You will not need to do any complex configuration to start working with Inter, just import the
42 | framework in top of your page in a script tag, and start building even the most complex web apps.
43 |
44 | ```html
45 |
46 | ```
47 |
48 | # Small
49 |
50 | It does not mean that it is less capable, it means that it is easy to learn and cheaper to parse and download.
51 |
52 | # You rarely touch in the _DOM_
53 |
54 | Almost every dom manipulation in an Inter app are handled by Inter, you must just focus in your application logic, this way your code base will be: **simpler** and **more maintainable**
55 |
56 | # Reactivity
57 |
58 | _Inter_ is super reactive, it means that, when there's a change it just updates the necessary part of the interface.
59 |
60 | # Compatibility
61 |
62 | _Inter_ just supports the modern browsers, it means that no Internet Explorer support.
63 |
64 | # License
65 |
66 | _Inter_ was realesed under the MIT LICENSE.
67 |
68 | # Guide
69 |
70 | To get an in-depth guide just read the official tutorial at [tutorial](http://interjs.github.io/v2/tutorial/pt/instalacao).
71 |
--------------------------------------------------------------------------------
/builder.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Written by Denis Power.
3 | *
4 | * builderconfig options.
5 | *
6 | * {
7 | * files: string[],
8 | * dir: "./core",
9 | * types: {
10 | * dir: "./types",
11 | * files: string[]
12 | * }
13 | * }
14 | *
15 | *
16 | *
17 | */
18 |
19 | console.log("Building...");
20 |
21 | import builderconfig from "./builderconfig.js";
22 | import { writeFileSync, readFileSync, readdirSync } from "node:fs";
23 | import { format } from "prettier";
24 |
25 | const {
26 | version,
27 | year,
28 | files,
29 | dir,
30 | types: { dir: typeDir, version: typeVersion },
31 | } = builderconfig;
32 |
33 | const Package = JSON.parse(readFileSync("./package.json"));
34 | const packageLock = JSON.parse(readFileSync("./package-lock.json"));
35 |
36 | class Inter {
37 | #source;
38 | #token;
39 | #peaceOfCode;
40 | #parsingExport = false;
41 | #parsingImport = false;
42 | #reStartTheLoop = false;
43 | #importConfig = {
44 | body: "",
45 | };
46 | #exportConfig = {
47 | name: void 0,
48 | Default: false,
49 | };
50 | #removeExportDeclaration = () => {
51 | const { name, Default } = this.#exportConfig;
52 |
53 | const pattern1 = new RegExp(`export\\s*${name}`, "g");
54 | const pattern2 = new RegExp(`export(?:\\s*)default(?:\\s*)${name}`, "g");
55 | const pattern = Default ? pattern2 : pattern1;
56 | this.#source = this.#source.replace(pattern, name);
57 | this.#parsingExport = false;
58 | this.#reStartTheLoop = true;
59 | };
60 |
61 | #removeImportDeclaration = () => {
62 | const { body } = this.#importConfig;
63 | this.#source = this.#source.replace(body, "");
64 | this.#importConfig.body = "";
65 | this.#parsingImport = false;
66 | this.#reStartTheLoop = true;
67 | };
68 |
69 | constructor(codeString) {
70 | this.#source = codeString;
71 | }
72 |
73 | removeImport() {}
74 |
75 | removeExportAndImportDeclaration(module) {
76 | for (let i = 0; i < this.#source.length; i++) {
77 | if (this.#reStartTheLoop) {
78 | this.#reStartTheLoop = false;
79 | i = 0;
80 | }
81 |
82 | this.#peaceOfCode = this.#source[i];
83 |
84 | if (!isBlankSpace(this.#peaceOfCode) && !this.#parsingImport)
85 | this.#token += this.#peaceOfCode;
86 | else if (this.#parsingImport) {
87 | this.#importConfig.body += this.#peaceOfCode;
88 |
89 | if (this.#importConfig.body.endsWith(";")) {
90 | this.#removeImportDeclaration();
91 | }
92 | } else if (isBlankSpace(this.#peaceOfCode) && this.#token) {
93 | if (
94 | this.#token == "import" &&
95 | !this.#parsingImport &&
96 | !this.#parsingExport
97 | ) {
98 | this.#parsingImport = true;
99 | this.#importConfig.body += "import ";
100 | } else if (
101 | this.#token == "export" &&
102 | !this.#parsingExport &&
103 | !this.#parsingImport &&
104 | module !== true
105 | ) {
106 | this.#parsingExport = true;
107 | } else if (this.#parsingExport) {
108 | const { name } = this.#exportConfig;
109 |
110 | if (!name) {
111 | if (this.#token !== "default") {
112 | this.#exportConfig.name = this.#token;
113 | this.#removeExportDeclaration();
114 | } else this.#exportConfig.Default = true;
115 | }
116 | }
117 |
118 | this.#token = "";
119 | }
120 | }
121 |
122 | return this.#source;
123 | }
124 | }
125 |
126 | function isBlankSpace(code) {
127 | return /\s/.test(code);
128 | }
129 |
130 | if (!files) throw new Error("No `builderconfing.js` file found");
131 |
132 | function buildTsDeclaration() {
133 | let body = "";
134 | const typeFiles = readdirSync(typeDir);
135 |
136 | for (const file of typeFiles) {
137 | const fileString = readFileSync(`${typeDir}/${file}`);
138 | body += fileString;
139 | }
140 |
141 | body = `
142 | /***
143 | * MIT LICENSED BY - Denis Power(Inter creator)
144 | * Typescript declaration file for Inter version ${version}
145 | * Version - ${typeVersion}
146 | * Repo - https://github.com/interjs/inter/types
147 | * GENERATED BY INTER BUILDER
148 | */
149 |
150 | ${body}
151 |
152 | `;
153 |
154 | writeFileSync("inter.m.d.ts", body);
155 | }
156 |
157 | function build(buildType) {
158 | const isModuleBuild = buildType == "module";
159 | const isGlobalBuild = buildType == "global";
160 |
161 | let body = "";
162 |
163 | for (const file of files) {
164 | let fileString = readFileSync(dir ? `${dir}/${file}` : file);
165 | /**
166 | * In module build, the exports declaration won't be removed in regular
167 | * files which contain the Inter core, but the export declaration from
168 | * the helpers and errors files must be removed, that's why here we're
169 | * considering them as special.
170 | */
171 | const specialFiles = new Set([
172 | "helpers.js",
173 | "template/errors.js",
174 | "renderList/errors.js",
175 | "ajax/errors.js",
176 | "ref/errors.js",
177 | "renderif/errors.js",
178 | "toattrs/errors.js",
179 | ]);
180 | if (specialFiles.has(file) && isModuleBuild) {
181 | let fileStringBody = "";
182 | fileStringBody += fileString;
183 | const frame = new Inter(fileStringBody);
184 | fileString = frame.removeExportAndImportDeclaration();
185 | }
186 |
187 | body += fileString;
188 | }
189 |
190 | const frame = new Inter(body);
191 | let builtCode;
192 |
193 | if (isGlobalBuild) builtCode = frame.removeExportAndImportDeclaration();
194 | else if (isModuleBuild)
195 | builtCode = frame.removeExportAndImportDeclaration(true);
196 |
197 | if (isGlobalBuild) {
198 | body = `
199 |
200 | /**
201 | * Interjs
202 | * Version - ${version}
203 | * MIT LICENSED BY - Denis Power
204 | * Repo - https://github.com/interjs/inter
205 | * 2021 - ${year}
206 | * GENERATED BY INTER BUILDER
207 | *
208 | */
209 |
210 | (function () {
211 |
212 | ${builtCode};
213 |
214 | window.Ref = Ref;
215 | window.renderIf = renderIf;
216 | window.renderList = renderList;
217 | window.template = template;
218 | window.toAttrs = toAttrs;
219 | window.Backend = Backend;
220 | console.log("The global version ${version} of Inter was loaded successfully.")
221 |
222 | })();
223 |
224 | `;
225 | } else if (isModuleBuild) {
226 | body = `
227 |
228 | /**
229 | * Interjs
230 | * Version - ${version}
231 | * MIT LICENSED BY - Denis Power
232 | * Repo - https://github.com/interjs/inter
233 | * 2021 - ${year}
234 | * GENERATED BY INTER BUILDER
235 | * Module version
236 | */
237 |
238 | export const interVersion = "${version}";
239 | ${builtCode}
240 | `;
241 | }
242 |
243 | if (isGlobalBuild) writeFileSync("inter.js", format(body));
244 | else if (isModuleBuild) writeFileSync("inter.m.js", format(body));
245 |
246 | Package.version = version;
247 | packageLock.version = version;
248 |
249 | writeFileSync("package.json", JSON.stringify(Package));
250 | writeFileSync("package-lock.json", JSON.stringify(packageLock));
251 | }
252 |
253 | buildTsDeclaration();
254 | build("global");
255 | build("module");
256 |
257 | console.log("Inter Built Successfully");
258 |
--------------------------------------------------------------------------------
/builderconfig.js:
--------------------------------------------------------------------------------
1 | export default {
2 | version: "2.2.4",
3 | year: "2025",
4 | files: [
5 | "template/errors.js",
6 | "renderList/errors.js",
7 | "ajax/errors.js",
8 | "ref/errors.js",
9 | "renderif/errors.js",
10 | "toattrs/errors.js",
11 | "helpers.js",
12 | "ref/index.js",
13 | "toattrs/index.js",
14 | "renderif/index.js",
15 | "template/index.js",
16 | "renderList/index.js",
17 | "ajax/index.js",
18 | ],
19 | dir: "./core",
20 | types: {
21 | dir: "./types",
22 | version: "1.0.0",
23 | },
24 | };
25 |
--------------------------------------------------------------------------------
/core/ajax/errors.js:
--------------------------------------------------------------------------------
1 | import { syErr, err, consW, valueType } from "../helpers.js";
2 |
3 | export function runIvalidRequestArgumentError(arg) {
4 | syErr(`The argument of [Backend instance].request method
5 | must be a plain javascript object, and you defined "${valueType(arg)}"
6 | as its argument.`);
7 | }
8 |
9 | export function runInvalidTypeOptionError() {
10 | syErr(`You must define the type(method) of request, in Ajax with the "type" option and
11 | it must be a string.`);
12 | }
13 |
14 | export function runInvalidPathOptionError() {
15 | syErr(`You must define the path where the request will be sent, with the "path" option and
16 | it must be a string.`);
17 | }
18 |
19 | export function runUnsupportedRequestTypeWarning(type) {
20 | err(`"${type}" is an unsupported request type in Ajax.`);
21 | }
22 |
23 | export function runInvalidAjaxEventWarning(name) {
24 | consW(`There's not any event named "${name}" in Ajax request.`);
25 | }
26 |
27 | export function runInvalidSecurityObjectWarning() {
28 | consW(`Invalid "security" object, security object must have the username and passoword
29 | properties.`);
30 | }
31 |
32 | export function runInvalidCallBackError() {
33 | syErr(`The arguments of "okay", "error" and "response" methods must be
34 | functions.`);
35 | }
36 |
37 | export function runInvalidResponseArgumentNumberError(argNumber) {
38 | syErr(`The response method must have two arguments and you only
39 | defined ${argNumber} argument.`);
40 | }
41 |
42 | export function runInvalidHeadersOptionError(headers) {
43 | syErr(`the "headers" property must be an object, and
44 | you defined it as : ${valueType(headers)}.`);
45 | }
46 |
47 | export function runInvalidAjaxEventsOptionError(events) {
48 | syErr(`the "events" property must be an object, and
49 | you defined it as : ${valueType(events)}.`);
50 | }
51 |
--------------------------------------------------------------------------------
/core/ajax/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | err,
3 | isObj,
4 | isCallable,
5 | isDefined,
6 | isEmptyObj,
7 | isBool,
8 | } from "../helpers.js";
9 |
10 | import {
11 | runInvalidCallBackError,
12 | runInvalidAjaxEventWarning,
13 | runInvalidHeadersOptionError,
14 | runInvalidPathOptionError,
15 | runInvalidResponseArgumentNumberError,
16 | runInvalidSecurityObjectWarning,
17 | runInvalidTypeOptionError,
18 | runIvalidRequestArgumentError,
19 | runUnsupportedRequestTypeWarning,
20 | runInvalidAjaxEventsOptionError,
21 | } from "./errors.js";
22 |
23 | function toObj(obj) {
24 | if (obj !== void 0) {
25 | try {
26 | return JSON.parse(obj);
27 | } catch (e) {
28 | return obj;
29 | }
30 | }
31 | }
32 |
33 | function openRequest(req, method, path, username, userpassword) {
34 | req.open(method, path, true, username, userpassword);
35 | }
36 |
37 | function createHeaders(headers, req) {
38 | Object.entries(headers).forEach(([header, value]) => {
39 | req.setRequestHeader(header, value);
40 | });
41 | }
42 |
43 | function createAjaxEvents(req, events, allowedEvents) {
44 | Object.entries(events).forEach(([name, handler]) => {
45 | if (allowedEvents.has(name)) {
46 | if (name !== "onprogress") {
47 | req[name] = () => {
48 | handler();
49 | };
50 | } else {
51 | req.onprogress = (ev) => {
52 | const Arg = {
53 | abort: () => req.abort(),
54 | progress: (ev.loaded * 100) / ev.total,
55 | };
56 |
57 | handler(Arg);
58 | };
59 | }
60 | } else runInvalidAjaxEventWarning(name);
61 | });
62 | }
63 |
64 | function convertStringToObj(string, reqObj) {
65 | function createGetter(obj, prop) {
66 | //At first we must define the property this way
67 | // so that the methods Object.keys and Object.values
68 | //work fine.
69 | obj[prop] = void 0;
70 | Object.defineProperty(obj, prop, {
71 | get() {
72 | return reqObj.getResponseHeader(prop);
73 | },
74 | });
75 | }
76 |
77 | const pattern = /(:?[\S]+):/g;
78 | const headers = {};
79 |
80 | string.replace(pattern, (match) => {
81 | match = match.replace(":", "");
82 | if (reqObj.getResponseHeader(match)) createGetter(headers, match);
83 | });
84 |
85 | return Object.freeze(headers);
86 | }
87 |
88 | function createRequestBody(body) {
89 | if (!isDefined(body)) return null;
90 | else if (body instanceof FormData || typeof body == "string") return body;
91 | else return JSON.stringify(body);
92 | }
93 |
94 | function isJSON(data) {
95 | try {
96 | const parsed = JSON.parse(data);
97 |
98 | return isObj(parsed);
99 | } catch (e) {
100 | return false;
101 | }
102 | }
103 |
104 | export function Backend() {
105 | if (new.target === void 0) {
106 | err("Backend is a constructor, call it with the new keyword.");
107 | }
108 | }
109 |
110 | Backend.prototype = {
111 | get [Symbol.toStringTag]() {
112 | return "Ajax";
113 | },
114 |
115 | request(obj) {
116 | if (!isObj(obj)) runIvalidRequestArgumentError(obj);
117 |
118 | const {
119 | type,
120 | path,
121 | events = {},
122 | timeout,
123 | withCredentials,
124 | body = null,
125 | headers = {},
126 | security,
127 | } = obj;
128 |
129 | const unSupportedRequestType = new Set(["connect", "trace"]);
130 |
131 | if (!isDefined(type) || typeof type !== "string")
132 | runInvalidTypeOptionError();
133 |
134 | if (!isDefined(path) || typeof path !== "string")
135 | runInvalidPathOptionError();
136 |
137 | if (unSupportedRequestType.has(path.toLowerCase()))
138 | runUnsupportedRequestTypeWarning(type);
139 |
140 | const responseHandlers = new Map();
141 | let requestOpened = false;
142 |
143 | function call() {
144 | const req = new XMLHttpRequest();
145 | const method = type.toUpperCase();
146 | const allowedEvents = new Set(["onprogress", "ontimeout", "onabort"]);
147 |
148 | const AjaxResponse = {
149 | get status() {
150 | return req.status;
151 | },
152 |
153 | get statusText() {
154 | return req.statusText;
155 | },
156 |
157 | get headers() {
158 | const stringifiedHeaders = req.getAllResponseHeaders();
159 |
160 | return convertStringToObj(stringifiedHeaders, req);
161 | },
162 |
163 | get data() {
164 | return toObj(req.responseText);
165 | },
166 |
167 | get [Symbol.toStringTag]() {
168 | return "AjaxResponse";
169 | },
170 |
171 | isObj() {
172 | return isJSON(req.responseText);
173 | },
174 | };
175 |
176 | if (isObj(security) && Object.keys(security).length >= 2) {
177 | if (security.username && security.password) {
178 | openRequest(req, method, path, security.username, security.password);
179 |
180 | requestOpened = true;
181 | } else runInvalidSecurityObjectWarning();
182 | }
183 |
184 | if (!requestOpened) {
185 | openRequest(req, method, path);
186 |
187 | requestOpened = true;
188 | }
189 |
190 | if (!isObj(headers)) runInvalidHeadersOptionError(headers);
191 | if (!isObj(events)) runInvalidAjaxEventsOptionError(events);
192 |
193 | if (!isEmptyObj(headers)) createHeaders(headers, req);
194 | if (!isEmptyObj(events)) createAjaxEvents(req, events, allowedEvents);
195 |
196 | req.onreadystatechange = function () {
197 | if (this.readyState == 4) {
198 | if (this.status >= 200 && this.status < 300) {
199 | if (responseHandlers.has("okay"))
200 | responseHandlers.get("okay")(AjaxResponse);
201 | } else {
202 | if (responseHandlers.has("error"))
203 | responseHandlers.get("error")(AjaxResponse);
204 | }
205 | }
206 | };
207 |
208 | if (isBool(withCredentials)) {
209 | req.withCredentials = withCredentials;
210 | }
211 |
212 | if (typeof timeout !== "number") {
213 | req.timeout = timeout;
214 | }
215 |
216 | req.send(createRequestBody(body));
217 | }
218 |
219 | const responseMethods = {
220 | okay(callBack) {
221 | if (!isCallable(callBack)) runInvalidCallBackError();
222 |
223 | responseHandlers.set("okay", callBack);
224 | //Starting the request...
225 | call();
226 | },
227 |
228 | error(callBack) {
229 | if (!isCallable(callBack)) runInvalidCallBackError();
230 |
231 | responseHandlers.set("error", callBack);
232 | //Starting the request...
233 | call();
234 | },
235 |
236 | response(okay, error) {
237 | const argNumber = arguments.length;
238 | if (argNumber < 2) runInvalidResponseArgumentNumberError(argNumber);
239 | if (!isCallable(okay) && !isCallable(error)) runInvalidCallBackError();
240 |
241 | responseHandlers.set("okay", okay);
242 | responseHandlers.set("error", error);
243 | //Starting the request...
244 | call();
245 | },
246 | };
247 |
248 | return responseMethods;
249 | },
250 | };
251 |
252 | Object.freeze(Backend.prototype);
253 |
--------------------------------------------------------------------------------
/core/helpers.js:
--------------------------------------------------------------------------------
1 | // Helpers functions.
2 |
3 | export function isValidTemplateReturn(arg) {
4 | return isObj(arg) && arg.element && arg[Symbol.for("template")];
5 | }
6 |
7 | export function isNotConfigurable(obj) {
8 | return (
9 | Object.isFrozen(obj) || Object.isSealed(obj) || !Object.isExtensible(obj)
10 | );
11 | }
12 |
13 | export function isObj(arg) {
14 | // For plain objects.
15 |
16 | return Object.prototype.toString.apply(arg, void 0) == "[object Object]";
17 | }
18 |
19 | export function getTagName(elementNode) {
20 | return elementNode.nodeName.toLowerCase();
21 | }
22 |
23 | export function isSet(arg) {
24 | return arg instanceof Set;
25 | }
26 |
27 | export function hasOwnProperty(target, prop) {
28 | const hasOwn = Object.prototype.hasOwnProperty.call(target, prop);
29 |
30 | return hasOwn;
31 | }
32 |
33 | export function isMap(arg) {
34 | return arg instanceof Map;
35 | }
36 |
37 | export function isDefined(arg) {
38 | return arg != void 0;
39 | }
40 |
41 | /**
42 | * Indirect boolean value checking can cause
43 | * unexpected result, that's why I am using direct
44 | * checking here.
45 | *
46 | */
47 |
48 | export function isTrue(v) {
49 | return Object.is(v, true);
50 | }
51 |
52 | export function isFalse(v) {
53 | return Object.is(v, false);
54 | }
55 |
56 | /**/
57 |
58 | export function isCallable(fn) {
59 | return typeof fn == "function";
60 | }
61 |
62 | export function isEmptyObj(obj) {
63 | return Object.keys(obj).length == 0;
64 | }
65 |
66 | export function isAtag(tag) {
67 | return tag instanceof HTMLElement;
68 | }
69 |
70 | export function validDomEvent(eventName) {
71 | return eventName in HTMLElement.prototype;
72 | }
73 |
74 | export function validStyleName(styeName) {
75 | return styeName in document.createElement("p").style;
76 | }
77 |
78 | export function createText(text) {
79 | return document.createTextNode(text);
80 | }
81 |
82 | export function validTagOption(option) {
83 | return typeof option == "string";
84 | }
85 |
86 | export function validObjectOptions(option1, option2, option3) {
87 | //For the styles, attrs and events options
88 |
89 | return isObj(option1) && isObj(option2) && isObj(option3);
90 | }
91 |
92 | export function getId(id) {
93 | if (typeof id !== "string")
94 | syErr("The value of the id attribute must be a string.");
95 |
96 | const el = document.getElementById(id);
97 |
98 | if (el == void 0)
99 | err(`There's not an element on the document with id "${id}".`);
100 | else return el;
101 | }
102 |
103 | export function valueType(val) {
104 | if (
105 | typeof val == "undefined" ||
106 | typeof val == "symbol" ||
107 | typeof val == "bigint" ||
108 | typeof val == "boolean" ||
109 | typeof val == "function" ||
110 | typeof val == "number" ||
111 | typeof val == "string"
112 | ) {
113 | return typeof val;
114 | } else {
115 | /**
116 | *
117 | * @val may be an array, a plain object or even
118 | * a native Javascript object,
119 | * let's check with the type() function.
120 | *
121 | */
122 |
123 | return type(val);
124 | }
125 | }
126 |
127 | // WARNINGS HELPERS
128 |
129 | export function syErr(err) {
130 | throw new Error(`Inter syntaxError : ${err}`);
131 | }
132 |
133 | export function err(e) {
134 | throw new Error(`Inter error: ${e}`);
135 | }
136 |
137 | export function consW(w) {
138 | console.warn(`Inter warning: ${w}`);
139 | }
140 |
141 | export function ParserWarning(w) {
142 | console.error(`Inter parser error: ${w}`);
143 | }
144 |
145 | //
146 |
147 | export function isArray(arg) {
148 | return Array.isArray(arg);
149 | }
150 |
151 | function type(val) {
152 | // All Javascript objects.
153 |
154 | const isAnobject =
155 | isDefined(val) && Object.prototype.toString.call(val).startsWith("[object");
156 |
157 | if (isAnobject) {
158 | return Object.prototype.toString
159 | .call(val)
160 | .replace("[object", "")
161 | .replace("]", "")
162 | .replace(/\s/g, "")
163 | .toLowerCase();
164 | } else {
165 | /**
166 | * @val is null.
167 | *
168 | */
169 |
170 | return "null";
171 | }
172 | }
173 |
174 | export function isBool(val) {
175 | /**
176 | *
177 | * Don't use typeof val==="boolean"; due to 1 and 0.
178 | *
179 | */
180 |
181 | return val == true || val == false;
182 | }
183 |
184 | //Just for renderList.
185 |
186 | export function validInProperty(IN) {
187 | return typeof IN == "string";
188 | }
189 |
190 | export function validEachProperty(each) {
191 | return (
192 | each instanceof Array ||
193 | isObj(each) ||
194 | each instanceof Map ||
195 | each instanceof Set ||
196 | typeof each === "number"
197 | );
198 | }
199 |
200 | function toIterable(data) {
201 | const iterable = {
202 | values: new Array(),
203 | type: void 0,
204 | };
205 |
206 | if (isArray(data)) {
207 | iterable.values = data;
208 | iterable.type = "array";
209 | } else if (isObj(data)) {
210 | iterable.values = Object.entries(data);
211 | iterable.type = "object";
212 | } else if (data instanceof Map) {
213 | data.forEach((value, key) => {
214 | iterable.values.push([key, value]);
215 | });
216 |
217 | iterable.type = "object";
218 | } else if (data instanceof Set) {
219 | iterable.values = Array.from(data);
220 | iterable.type = "set";
221 | } else if (typeof data === "number") {
222 | for (let i = 0; i < data; i++) {
223 | iterable.values.push(i);
224 | }
225 |
226 | iterable.type = "number";
227 | }
228 |
229 | return iterable;
230 | }
231 |
232 | export function Iterable(data) {
233 | this.source = toIterable(data);
234 | this.break = !1;
235 | }
236 |
237 | Iterable.prototype.each = function (callBack) {
238 | let index = -1;
239 |
240 | for (const data of this.source.values) {
241 | index++;
242 |
243 | callBack(data, index, this.source.type);
244 |
245 | if (this.break) break;
246 | }
247 | };
248 |
249 | export function isNegativeValue(value) {
250 | value = typeof value == "string" ? value.trim() : value;
251 | const nevagativeValues = new Set([0, false, null, undefined, ""]);
252 |
253 | return nevagativeValues.has(value);
254 | }
255 |
256 | export function isPositiveValue(value) {
257 | return !isNegativeValue(value);
258 | }
259 |
260 | export function isTringOrNumber(value) {
261 | typeof value == "string" || typeof value == "number";
262 | }
263 |
264 | //
265 |
--------------------------------------------------------------------------------
/core/ref/errors.js:
--------------------------------------------------------------------------------
1 | import { consW, syErr, valueType } from "../helpers.js";
2 |
3 | export function runReservedRefNameWarning(refName) {
4 | consW(`"${refName}" is a reserved reference name, use other name.`);
5 | }
6 |
7 | export function runInvalidSetRefsValueError(arg) {
8 | syErr(`"${valueType(arg)}" is not a valid value for the "setRefs" property.
9 | The value of the setRefs property must be a plain Javascript object.`);
10 | }
11 |
12 | export function runInvalidRefArgument() {
13 | syErr("The argument of the Ref function must be a plain Javascript object.");
14 | }
15 |
16 | export function runInvalidRefInProperty() {
17 | syErr("The value of the 'in' property on the Ref function must be a string.");
18 | }
19 |
20 | export function runInvalidRefDataProperty() {
21 | syErr(
22 | "The value of the 'data' property on the Ref function must be a plain Javascript object. "
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/core/ref/index.js:
--------------------------------------------------------------------------------
1 | import { isObj, syErr, isCallable, getId, hasOwnProperty } from "../helpers.js";
2 |
3 | import {
4 | runInvalidSetRefsValueError,
5 | runInvalidRefDataProperty,
6 | runInvalidRefInProperty,
7 | runInvalidRefArgument,
8 | runReservedRefNameWarning,
9 | } from "./errors.js";
10 |
11 | function hasProp(object) {
12 | return Object.keys(object).length > 0;
13 | }
14 |
15 | function hasRefs(text) {
16 | return /{\s*.*\s*}/.test(text);
17 | }
18 |
19 | function getRefs(text) {
20 | /**
21 | *
22 | * @text must be a string containing refs.
23 | *
24 | * This function is used in reference computation,
25 | * it helps Inter making an eficient reference computation.
26 | *
27 | */
28 |
29 | const ref = /{\s*(:?[\w-\s]+)\s*}/g;
30 |
31 | const refs = new Set();
32 |
33 | text.replace(ref, (plainRef) => {
34 | const refName = plainRef.replace("{", "").replace("}", "").trim();
35 |
36 | refs.add(refName);
37 | });
38 |
39 | return Array.from(refs);
40 | }
41 |
42 | function hasRefNamed(text, refName) {
43 | const pattern = new RegExp(`{\\s*${refName}\\s*}`);
44 |
45 | return pattern.test(text);
46 | }
47 |
48 | /**
49 | *
50 | * We are considering them as special attributes
51 | * because we must not use the setAttribute method
52 | * to set them.
53 | *
54 | */
55 |
56 | const specialAttrs = new Set(["currentTime", "value"]);
57 |
58 | function runRefParsing(rootElement, refs, refCache) {
59 | function getTextNodes(el) {
60 | const _childNodes = new Set();
61 |
62 | if (el.hasChildNodes())
63 | for (const child of el.childNodes) {
64 | if (
65 | child.nodeType == 3 &&
66 | child.textContent.trim().length > 0 &&
67 | hasRefs(child.textContent)
68 | ) {
69 | _childNodes.add(child);
70 | }
71 | }
72 |
73 | return Array.from(_childNodes);
74 | }
75 |
76 | const children = rootElement.getElementsByTagName("*");
77 |
78 | function runTextRefParsing(parentNode) {
79 | function parseRefsInText(node) {
80 | for (const ref in refs) {
81 | if (
82 | node.textContent.trim().length > 0 &&
83 | hasRefNamed(node.textContent, ref)
84 | ) {
85 | const setting = {
86 | target: node,
87 | text: node.textContent,
88 | };
89 |
90 | refCache.add(setting);
91 |
92 | break;
93 | }
94 | }
95 | }
96 |
97 | if (parentNode.nodeType == 1) {
98 | for (const node of parentNode.childNodes) {
99 | if (node.hasChildNodes() && node.nodeType == 1) {
100 | runTextRefParsing(node);
101 | continue;
102 | }
103 |
104 | parseRefsInText(node);
105 | }
106 | } else if (parentNode.nodeType == 3) {
107 | // Parsing the references
108 | // in the main container
109 | // text nodes.
110 |
111 | parseRefsInText(parentNode);
112 | }
113 | }
114 |
115 | function parseRefsInAttrs(elementNode) {
116 | const setting = {
117 | target: elementNode,
118 | attrs: Object.create(null),
119 | refs: refs,
120 | };
121 |
122 | for (const attr of elementNode.attributes) {
123 | for (const ref in refs) {
124 | if (hasRefNamed(attr.value, ref)) {
125 | if (!specialAttrs.has(attr.name)) {
126 | setting.attrs[attr.name] = attr.value;
127 | } else {
128 | refCache.specialAttrs.add({
129 | target: elementNode,
130 | attr: {
131 | [attr.name]: attr.value,
132 | },
133 | });
134 |
135 | elementNode.removeAttribute(attr.name);
136 | }
137 |
138 | break;
139 | }
140 | }
141 | }
142 |
143 | if (hasProp(setting.attrs)) {
144 | // The true argument says to the parser
145 | // to register the reference as an attribute reference.
146 | refCache.add(setting, true);
147 | }
148 | }
149 |
150 | const textNodes = getTextNodes(rootElement);
151 |
152 | if (textNodes.length > 0) {
153 | for (const text of textNodes) {
154 | runTextRefParsing(text);
155 | }
156 | }
157 |
158 | for (const child of children) {
159 | runTextRefParsing(child);
160 | parseRefsInAttrs(child);
161 | }
162 |
163 | refCache.updateRefs();
164 | }
165 | export function Ref(obj) {
166 | if (new.target != void 0) {
167 | syErr("Do not call the Ref function with the new keyword.");
168 | } else if (!isObj(obj)) runInvalidRefArgument();
169 | else {
170 | const { in: IN, data } = obj;
171 |
172 | if (!(typeof IN === "string")) runInvalidRefInProperty();
173 |
174 | if (!isObj(data)) runInvalidRefDataProperty();
175 |
176 | const reservedRefNames = new Set(["setRefs", "observe"]);
177 |
178 | for (const refName in data) {
179 | if (reservedRefNames.has(refName)) {
180 | runReservedRefNameWarning(refName);
181 | delete data[refName];
182 |
183 | continue;
184 | }
185 |
186 | if (isCallable(data[refName])) {
187 | data[refName] = data[refName].call(data);
188 | }
189 | }
190 |
191 | const proxyTarget = Object.assign({}, data);
192 | const refParser = {
193 | attrs: new Set(), // Attribute reference.
194 | texts: new Set(), // Text reference.
195 | specialAttrs: new Set(),
196 | observed: new Map(),
197 | refs: proxyTarget,
198 | hadIteratedOverSpecialAttrs: false,
199 | add(setting, attr) {
200 | // if attr, the parser must register the reference
201 | // as an attribute reference.
202 |
203 | if (attr) {
204 | this.attrs.add(setting);
205 | } else {
206 | this.texts.add(setting);
207 | }
208 | },
209 |
210 | updateSpecialAttrs() {
211 | for (const special of this.specialAttrs) {
212 | const { target } = special;
213 |
214 | // eslint-disable-next-line prefer-const
215 | let [attrName, attrValue] = Object.entries(special.attr)[0];
216 |
217 | const refs = getRefs(attrValue);
218 |
219 | for (const ref of refs) {
220 | if (reservedRefNames.has(ref)) continue;
221 | if (ref in this.refs) {
222 | const pattern = new RegExp(`{\\s*(:?${ref})\\s*}`, "g");
223 | attrValue = attrValue.replace(pattern, this.refs[ref]);
224 |
225 | if (!hasRefs(attrValue)) break;
226 | }
227 | }
228 |
229 | target[attrName] = attrValue;
230 | }
231 | },
232 | updateAttrRef() {
233 | for (const attributeRef of this.attrs) {
234 | const { target, attrs } = attributeRef;
235 |
236 | // eslint-disable-next-line prefer-const
237 | for (let [name, value] of Object.entries(attrs)) {
238 | const refNames = getRefs(value);
239 |
240 | for (const refName of refNames) {
241 | if (reservedRefNames.has(refName)) continue;
242 | if (refName in this.refs) {
243 | const pattern = new RegExp(`{\\s*(:?${refName})\\s*}`, "g");
244 |
245 | value = value.replace(pattern, this.refs[refName]);
246 |
247 | if (!hasRefs(value)) break;
248 | }
249 | }
250 |
251 | if (target.getAttribute(name) !== value) {
252 | target.setAttribute(name, value);
253 | }
254 | }
255 | }
256 | },
257 | updateTextRef() {
258 | if (this.texts.size > 0) {
259 | for (const textRef of this.texts) {
260 | // eslint-disable-next-line prefer-const
261 | let { target, text } = textRef;
262 |
263 | // Returns the ref Names
264 | // on the "text" string.
265 | const refNames = getRefs(text);
266 |
267 | for (const refName of refNames) {
268 | if (reservedRefNames.has(refName)) continue;
269 | if (refName in this.refs) {
270 | const pattern = new RegExp(`{\\s*(:?${refName})\\s*}`, "g");
271 |
272 | text = text.replace(pattern, this.refs[refName]);
273 |
274 | if (!hasRefs(text)) break;
275 | }
276 | }
277 |
278 | if (target.textContent !== text) {
279 | target.textContent = text;
280 | }
281 | }
282 | }
283 | },
284 |
285 | updateRefs() {
286 | if (this.texts.size > 0) this.updateTextRef();
287 | if (this.attrs.size > 0) this.updateAttrRef();
288 | if (this.specialAttrs.size > 0) this.updateSpecialAttrs();
289 | },
290 | };
291 |
292 | runRefParsing(getId(IN), proxyTarget, refParser);
293 |
294 | function runObserveCallBack(refName, value, oldValue) {
295 | if (refParser.observed.size == 1 && !reservedRefNames.has(refName)) {
296 | const callBack = refParser.observed.get("callBack");
297 |
298 | callBack(refName, value, oldValue);
299 | }
300 | }
301 |
302 | const reactor = new Proxy(proxyTarget, {
303 | set(target, key, value, proxy) {
304 | if (key in target && target[key] == value) return false;
305 |
306 | const oldValue = target[key];
307 |
308 | if (isCallable(value)) {
309 | value = value.call(proxy);
310 | }
311 | Reflect.set(...arguments);
312 | runObserveCallBack(key, value, oldValue);
313 | if (!(key in proxy)) {
314 | // Dynamic ref.
315 |
316 | runRefParsing(getId(IN), proxyTarget, refParser);
317 | } else {
318 | refParser.updateRefs();
319 | return true;
320 | }
321 | },
322 |
323 | get(...args) {
324 | return Reflect.get(...args);
325 | },
326 | });
327 |
328 | Object.defineProperties(reactor, {
329 | setRefs: {
330 | set(o) {
331 | if (isObj(o)) {
332 | let hasNewRefName = false;
333 |
334 | for (const [refName, refValue] of Object.entries(o)) {
335 | if (reservedRefNames.has(refName)) {
336 | runReservedRefNameWarning(refName);
337 |
338 | continue;
339 | }
340 |
341 | if (!hasOwnProperty(this, refName)) hasNewRefName = true;
342 | if (hasOwnProperty(this, refName) && this[refName] == refValue)
343 | continue;
344 |
345 | const oldRefValue = proxyTarget[refName];
346 |
347 | if (isCallable(refValue)) {
348 | proxyTarget[refName] = refValue.call(this);
349 | } else {
350 | proxyTarget[refName] = refValue;
351 | }
352 |
353 | runObserveCallBack(refName, refValue, oldRefValue);
354 | }
355 |
356 | if (hasNewRefName) runRefParsing(getId(IN), proxyTarget, refParser);
357 | } else runInvalidSetRefsValueError(o);
358 | },
359 | enumerable: !1,
360 | },
361 | observe: {
362 | value(callBack) {
363 | if (!isCallable(callBack)) {
364 | syErr(
365 | "The argument of [Reference reactor].observe() must be a function."
366 | );
367 | }
368 |
369 | if (refParser.observed.size === 0) {
370 | refParser.observed.set("callBack", callBack);
371 |
372 | return true;
373 | }
374 |
375 | return false;
376 | },
377 | enumerable: !1,
378 | writable: !1,
379 | },
380 | });
381 |
382 | return reactor;
383 | }
384 | }
385 |
--------------------------------------------------------------------------------
/core/renderif/errors.js:
--------------------------------------------------------------------------------
1 | import {
2 | syErr,
3 | err,
4 | ParserWarning,
5 | valueType,
6 | consW,
7 | getTagName,
8 | } from "../helpers.js";
9 |
10 | export function runInvalidRenderIfInOptionError() {
11 | syErr(`The value of the "in" property in the renderIf function
12 | must be a string.`);
13 | }
14 |
15 | export function runInvalidRenderIfDataOptionError() {
16 | syErr(`The value of the "data" property in the renderIf function
17 | must be a plain Javascript object.`);
18 | }
19 |
20 | export function runNotDefinedConditionalPropWarning(prop) {
21 | consW(`"${prop}" was not defined as a conditional property.`);
22 | }
23 |
24 | export function runAlreadyUsedPropInConditionalGroupError(prop) {
25 | err(`
26 | Two elements in the conditional group can not have the same conditional property.
27 | Property: "${prop}"
28 | `);
29 | }
30 |
31 | export function runInvalidRenderIfObserveArgumentError() {
32 | syErr(`The argument of [renderIf reactor].observe()
33 | must be a function.`);
34 | }
35 |
36 | export function runInvalidRenderIfArgError() {
37 | syErr("The argument of renderIf must be a plain Javascript object.");
38 | }
39 |
40 | export function runInvalidConditionalPropValueError(prop) {
41 | err(`The value of a conditional property must be boolean(true/false),
42 | and the value of "${prop}" property is not boolean.`);
43 | }
44 |
45 | export function runHasMoreThanOneCondtionalAttributeError(child) {
46 | ParserWarning(`The conditional rendering parser found a/an "${getTagName(
47 | child
48 | )}"
49 | element which has more than one conditional atribute, it's forbidden.`);
50 | }
51 |
52 | export function runNotDefinedIfNotPropWarning(
53 | child,
54 | _ifNot /*propValue*/,
55 | data
56 | ) {
57 | if (_ifNot.trim().length == 0) {
58 | runInvalidConditionalAttrs("_ifNot");
59 | return;
60 | }
61 | ParserWarning(`
62 |
63 | The conditional rendering parser found
64 | an element with the "_ifNot" attribute and the value
65 | of this attribute is not a conditional property.
66 |
67 | {
68 | element: ${child.nodeName.toLowerCase()},
69 | _ifNot: ${_ifNot},
70 | data: { ${Object.keys(data)} }
71 | }
72 |
73 | `);
74 | }
75 |
76 | function runInvalidConditionalAttrs(attrName) {
77 | ParserWarning(`The conditional rendering parser found an ${attrName} attribute that does not
78 | have a value assigned to it. Assign a value to the ${attrName} attribute.
79 | `);
80 | }
81 |
82 | export function runNotDefinedElseIfPropWarning(propValue) {
83 | if (propValue.trim().length == 0) {
84 | runInvalidConditionalAttrs("_elseIf");
85 | return;
86 | }
87 |
88 | ParserWarning(`The conditional rendering parser found an element which has the "_elseIf"
89 | conditional property whose the value is: "${propValue}",
90 | but you did not define any conditional property with that name.
91 |
92 | `);
93 | }
94 |
95 | export function runInvalidElseAttributeError() {
96 | ParserWarning(`The parser found an element with the "_else" attribute,
97 | but there is not an element with the "_if" or a valid "_elseIf" attribute before it.`);
98 | }
99 |
100 | export function runInvalidElseIfAttributeError(child) {
101 | ParserWarning(`a/an "${getTagName(
102 | child
103 | )}" element has the "_elseIf" attribute,
104 | but it does not come after an element with the "_if" or a valid "_elseIf" attribute.`);
105 | }
106 |
107 | export function runInvalidSetCondsValueError(arg) {
108 | syErr(`The value of [renderIf reactor].setConds must be
109 | a plain Javascript object, and you defined ${valueType(arg)}
110 | as its value.`);
111 | }
112 |
113 | export function runNotDefinedIfPropWarning(propValue, child, data) {
114 | if (propValue.trim().length == 0) {
115 | runInvalidConditionalAttrs("_if");
116 | return;
117 | }
118 | ParserWarning(`
119 | The conditional rendering parser found
120 | an element which has the "_if" attribute and the value
121 | of this attribute is not a conditional property.
122 |
123 | {
124 | element: ${child.nodeName.toLowerCase()},
125 | _if: ${propValue},
126 | data: { ${Object.keys(data)} }
127 | }
128 |
129 | `);
130 | }
131 |
--------------------------------------------------------------------------------
/core/renderif/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | isFalse,
3 | isObj,
4 | getId,
5 | consW,
6 | err,
7 | isCallable,
8 | isBool,
9 | isTrue,
10 | isDefined,
11 | isAtag,
12 | hasOwnProperty,
13 | } from "../helpers.js";
14 |
15 | import {
16 | runAlreadyUsedPropInConditionalGroupError,
17 | runHasMoreThanOneCondtionalAttributeError,
18 | runInvalidConditionalPropValueError,
19 | runInvalidElseAttributeError,
20 | runInvalidElseIfAttributeError,
21 | runInvalidRenderIfArgError,
22 | runInvalidRenderIfDataOptionError,
23 | runInvalidRenderIfInOptionError,
24 | runInvalidRenderIfObserveArgumentError,
25 | runInvalidSetCondsValueError,
26 | runNotDefinedConditionalPropWarning,
27 | runNotDefinedElseIfPropWarning,
28 | runNotDefinedIfNotPropWarning,
29 | runNotDefinedIfPropWarning,
30 | } from "./errors.js";
31 |
32 | function getChildNodes(root) {
33 | const nodes = new Array();
34 |
35 | root.childNodes.forEach((node) => {
36 | if (
37 | node.nodeType == 1 ||
38 | (node.nodeType == 3 && !node.textContent.trim().length == 0)
39 | ) {
40 | nodes.push(node);
41 | }
42 | });
43 |
44 | return nodes;
45 | }
46 |
47 | function runReservedPropWarning(prop) {
48 | consW(
49 | `"${prop}" is a reserved property, you can not use it as a conditional property.`
50 | );
51 | }
52 |
53 | const conditionalAttributeCounter = {
54 | store: new Set(),
55 | set(keys) {
56 | for (const key of keys) {
57 | if (isDefined(key)) this.store.add(key);
58 | }
59 | },
60 |
61 | getSize() {
62 | const size = this.store.size;
63 |
64 | this.store.clear();
65 |
66 | return size;
67 | },
68 | };
69 |
70 | function hasMoreThanOneConditionalAttribute(elementNode) {
71 | const _ifAttrValue = elementNode.getAttribute("_if"),
72 | _elseIfAttrValue = elementNode.getAttribute("_elseIf"),
73 | _ifNotAttrValue = elementNode.getAttribute("_ifNot"),
74 | _elseAttr = elementNode.hasAttribute("_else") ? true : void 0;
75 |
76 | conditionalAttributeCounter.set([
77 | _ifAttrValue,
78 | _elseIfAttrValue,
79 | _ifNotAttrValue,
80 | _elseAttr,
81 | ]);
82 |
83 | return conditionalAttributeCounter.getSize() > 1;
84 | }
85 |
86 | function hasNoConditionalAttr(elementNode) {
87 | const _ifAttr = elementNode.hasAttribute("_if"),
88 | _elseIfAttr = elementNode.hasAttribute("_elseIf"),
89 | _ifNotAttr = elementNode.hasAttribute("_ifNot"),
90 | _elseAttr = elementNode.hasAttribute("_else");
91 |
92 | return !_ifAttr && !_elseIfAttr && !_ifNotAttr && !_elseAttr;
93 | }
94 |
95 | export function renderIf(obj) {
96 | if (!isObj(obj)) runInvalidRenderIfArgError();
97 |
98 | if (new.target !== void 0) {
99 | err(`renderIf is not a constructor, do not call it with
100 | the new keyword.`);
101 | } else {
102 | const { in: IN, data } = obj;
103 |
104 | const reservedProps = new Set(["setConds", "observe"]);
105 | const theContainer = getId(IN);
106 | const conditionalRenderingCache = new Array();
107 |
108 | // eslint-disable-next-line no-inner-declarations
109 | function parseAttrs(rootElement) {
110 | let index = -1;
111 |
112 | const parserOptions = {
113 | target: void 0,
114 | if: void 0,
115 | else: void 0,
116 | ifNot: void 0,
117 | elseIfs: new Set(),
118 | index: void 0,
119 | lastRendered: {
120 | target: void 0,
121 | prop: void 0,
122 | },
123 | conditionalProps: new Set(),
124 | rootElement: rootElement,
125 | set setOptions(obj) {
126 | for (const [option, value] of Object.entries(obj)) {
127 | this[option] = value;
128 |
129 | if (option == "if" && isDefined(value))
130 | this.conditionalProps.add(value);
131 | }
132 | },
133 |
134 | canCache() {
135 | return this.if != void 0;
136 | },
137 |
138 | addElseIf(elseIfOptions) {
139 | const { elseIf: prop } = elseIfOptions;
140 |
141 | if (!this.conditionalProps.has(prop)) {
142 | this.elseIfs.add(elseIfOptions);
143 | this.conditionalProps.add(prop);
144 | } else runAlreadyUsedPropInConditionalGroupError(prop);
145 | },
146 |
147 | deleteData() {
148 | this.setOptions = {
149 | target: void 0,
150 | if: void 0,
151 | else: void 0,
152 | ifNot: void 0,
153 | index: void 0,
154 | };
155 |
156 | this.elseIfs.clear();
157 | this.conditionalProps.clear();
158 | },
159 |
160 | getOptions() {
161 | const options = Object.assign({}, this);
162 | options.elseIfs = Array.from(this.elseIfs);
163 | options.conditionalProps = Array.from(this.conditionalProps);
164 |
165 | this.deleteData();
166 |
167 | return options;
168 | },
169 | };
170 |
171 | const cacheParserOptions = () => {
172 | const conditionalGroup = parserOptions.elseIfs.size;
173 | const options = parserOptions.getOptions();
174 | if (conditionalGroup) conditionalRenderingCache.unshift(options);
175 | else conditionalRenderingCache.push(options);
176 | };
177 |
178 | const rootElementChildNodes = getChildNodes(rootElement);
179 | const rootElementInitialLength = rootElementChildNodes.length;
180 | for (const child of rootElementChildNodes) {
181 | index++;
182 | child.index = index;
183 |
184 | const isTheLastIteration = rootElementInitialLength - 1 == index;
185 |
186 | if (child.nodeType == 3) {
187 | if (parserOptions.canCache()) cacheParserOptions();
188 |
189 | continue;
190 | }
191 |
192 | if (!hasNoConditionalAttr(child)) child.parentNode.removeChild(child);
193 |
194 | if (child.children.length > 0) {
195 | parseAttrs(child);
196 | }
197 |
198 | if (hasMoreThanOneConditionalAttribute(child)) {
199 | runHasMoreThanOneCondtionalAttributeError(child);
200 |
201 | continue;
202 | }
203 |
204 | if (hasNoConditionalAttr(child) && parserOptions.canCache()) {
205 | cacheParserOptions();
206 |
207 | continue;
208 | }
209 |
210 | if (child.hasAttribute("_ifNot")) {
211 | const _ifNot = child.getAttribute("_ifNot");
212 |
213 | if (hasOwnProperty(data, _ifNot)) {
214 | child.removeAttribute("_ifNot");
215 |
216 | if (parserOptions.canCache()) cacheParserOptions();
217 |
218 | parserOptions.setOptions = {
219 | ifNot: _ifNot,
220 | target: child,
221 | index: index,
222 | };
223 |
224 | cacheParserOptions();
225 |
226 | continue;
227 | } else runNotDefinedIfNotPropWarning(child, _ifNot, data);
228 | } else if (child.hasAttribute("_else")) {
229 | if (!parserOptions.if) runInvalidElseAttributeError();
230 | else {
231 | parserOptions.else = child;
232 | child.removeAttribute("_else");
233 | cacheParserOptions();
234 | }
235 | } else if (child.hasAttribute("_elseIf")) {
236 | const elseIf = child.getAttribute("_elseIf");
237 | child.removeAttribute("_elseIf");
238 |
239 | if (!parserOptions.if) runInvalidElseIfAttributeError(child);
240 | else if (!hasOwnProperty(data, elseIf))
241 | runNotDefinedElseIfPropWarning(elseIf);
242 | else {
243 | parserOptions.addElseIf({
244 | target: child,
245 | index: index,
246 | elseIf: elseIf,
247 | });
248 | }
249 | } else if (child.hasAttribute("_if")) {
250 | if (parserOptions.canCache()) cacheParserOptions();
251 |
252 | const _if = child.getAttribute("_if");
253 |
254 | child.removeAttribute("_if");
255 |
256 | if (!hasOwnProperty(data, _if)) {
257 | runNotDefinedIfPropWarning(_if, child, data);
258 |
259 | continue;
260 | }
261 |
262 | parserOptions.setOptions = {
263 | if: _if,
264 | target: child,
265 | index: index,
266 | };
267 | }
268 |
269 | if (isTheLastIteration && parserOptions.canCache())
270 | cacheParserOptions();
271 | }
272 | }
273 |
274 | if (!(typeof IN === "string")) runInvalidRenderIfInOptionError();
275 |
276 | if (!isObj(data)) runInvalidRenderIfDataOptionError();
277 |
278 | // eslint-disable-next-line prefer-const
279 | for (let [prop, value] of Object.entries(data)) {
280 | if (reservedProps.has(prop)) {
281 | runReservedPropWarning(prop);
282 | continue;
283 | }
284 |
285 | value = isCallable(value) ? value.call(data) : value;
286 |
287 | if (!isBool(value)) runInvalidConditionalPropValueError(prop);
288 |
289 | data[prop] = value;
290 | }
291 |
292 | parseAttrs(theContainer);
293 |
294 | const reactor = runRenderingSystem(conditionalRenderingCache, data);
295 | return reactor;
296 | }
297 | }
298 |
299 | function runRenderingSystem(ArrayOfOptions, data) {
300 | function falsefyProps(conditionalProps, changedProp) {
301 | if (isFalse(proxyTarget[changedProp]) || conditionalProps.length < 2)
302 | return;
303 |
304 | for (const prop of conditionalProps) {
305 | const hasTrueValue = isTrue(proxyTarget[prop]);
306 |
307 | if (hasTrueValue && prop !== changedProp) {
308 | proxyTarget[prop] = false;
309 | }
310 | }
311 | }
312 |
313 | function renderElseIf(elseIfs, options) {
314 | function lastRenderedHasParent() {
315 | return options.lastRendered.target.parentNode != null;
316 | }
317 |
318 | let rendered = false;
319 |
320 | for (const { target, elseIf } of elseIfs) {
321 | const lastRendered = options.lastRendered;
322 |
323 | if (lastRendered.target && isTrue(proxyTarget[lastRendered.prop])) {
324 | rendered = true;
325 |
326 | break;
327 | }
328 |
329 | if (
330 | lastRendered.target &&
331 | isFalse(proxyTarget[lastRendered.prop]) &&
332 | lastRenderedHasParent()
333 | ) {
334 | options.rootElement.removeChild(lastRendered.target);
335 | options.lastRendered = { prop: void 0, target: void 0 };
336 | }
337 |
338 | if (isTrue(proxyTarget[elseIf])) {
339 | insertBefore(options.rootElement, target);
340 |
341 | options.lastRendered = {
342 | prop: elseIf,
343 | target: target,
344 | };
345 |
346 | rendered = true;
347 | if (
348 | lastRendered.target &&
349 | !isDefined(lastRendered.prop) &&
350 | lastRenderedHasParent()
351 | ) {
352 | /*The last rendered element was the one with the _else attribute*/
353 |
354 | options.rootElement.removeChild(lastRendered.target);
355 | }
356 | }
357 | }
358 |
359 | return rendered;
360 | }
361 |
362 | function checkWhatToRender(source, changedProp) {
363 | for (const options of ArrayOfOptions) {
364 | const {
365 | target,
366 | if: IF,
367 | elseIfs,
368 | else: ELSE,
369 | ifNot,
370 | rootElement,
371 | } = options;
372 | const conditionalProps = options.conditionalProps;
373 | const isInConditionalGroup = new Set(conditionalProps).has(changedProp);
374 |
375 | if (isDefined(changedProp) && isInConditionalGroup)
376 | falsefyProps(conditionalProps, changedProp);
377 |
378 | if (ifNot) {
379 | if (isFalse(source[ifNot]) && target.parentNode == null) {
380 | if (rootElement.textContent.trim().length > 0) {
381 | insertBefore(rootElement, target);
382 | } else {
383 | rootElement.appendChild(target);
384 | }
385 | } else {
386 | if (target.parentNode == rootElement && isTrue(source[ifNot])) {
387 | rootElement.removeChild(target);
388 | }
389 | }
390 | } else if (isFalse(source[IF])) {
391 | if (target.parentNode == rootElement && !ELSE) {
392 | rootElement.removeChild(target);
393 | renderElseIf(elseIfs, options);
394 | } else if (ELSE || elseIfs.length > 0) {
395 | const rendered = renderElseIf(elseIfs, options);
396 |
397 | if (target.parentNode != null) rootElement.removeChild(target);
398 | if (rendered && ELSE && ELSE.parentNode != null) {
399 | ELSE.parentNode.removeChild(ELSE);
400 | } else if (!rendered && ELSE && ELSE.parentNode == null) {
401 | insertBefore(rootElement, ELSE);
402 | options.lastRendered = {
403 | target: ELSE,
404 | prop: void 0,
405 | };
406 | }
407 | }
408 | } else if (isTrue(source[IF])) {
409 | if (target.parentNode == null) {
410 | if (ELSE && ELSE.parentNode != null) {
411 | rootElement.removeChild(ELSE);
412 | insertBefore(rootElement, target);
413 | } else {
414 | insertBefore(rootElement, target);
415 | }
416 |
417 | const { target: _target } = options.lastRendered;
418 |
419 | if (
420 | isAtag(_target) &&
421 | _target.parentNode != null &&
422 | !_target.isSameNode(target)
423 | ) {
424 | _target.parentNode.removeChild(_target);
425 | }
426 |
427 | options.lastRendered = {
428 | target: target,
429 | prop: IF,
430 | };
431 | }
432 | }
433 | }
434 | }
435 | function insertBefore(root, target) {
436 | const children = getChildNodes(root),
437 | lastChild = children[children.length - 1];
438 |
439 | if (target && target.parentNode == null) {
440 | if (lastChild && lastChild.index > target.index) {
441 | for (const child of children) {
442 | if (child.index > target.index) {
443 | root.insertBefore(target, child);
444 |
445 | break;
446 | }
447 | }
448 | } else {
449 | root.appendChild(target);
450 | }
451 | }
452 | }
453 |
454 | function runObserveCallBack(prop, value) {
455 | if (observer.size == 1) {
456 | const callBack = observer.get("callBack");
457 |
458 | callBack(prop, value);
459 | }
460 | }
461 |
462 | const reservedProps = new Set(["setConds", "observe"]);
463 | const observer = new Map();
464 | const proxyTarget = Object.assign({}, data);
465 |
466 | checkWhatToRender(proxyTarget);
467 |
468 | const reactor = new Proxy(proxyTarget, {
469 | set(target, prop, value) {
470 | if (prop in target && target[prop] == value) return false;
471 | if (!(prop in data) && !reservedProps.has(prop)) {
472 | runNotDefinedConditionalPropWarning(prop);
473 |
474 | return false;
475 | }
476 |
477 | if (!isBool(value) && !reservedProps.has(prop)) {
478 | runInvalidConditionalPropValueError(prop);
479 |
480 | return false;
481 | }
482 |
483 | Reflect.set(target, prop, value);
484 |
485 | if (!reservedProps.has(prop)) {
486 | checkWhatToRender(proxyTarget, prop);
487 |
488 | runObserveCallBack(prop, value);
489 | }
490 |
491 | return true;
492 | },
493 |
494 | deleteProperty() {
495 | return false;
496 | },
497 | });
498 |
499 | Object.defineProperties(reactor, {
500 | observe: {
501 | value(fn) {
502 | if (!isCallable(fn)) runInvalidRenderIfObserveArgumentError();
503 |
504 | if (observer.size == 0) {
505 | observer.set("callBack", fn);
506 |
507 | return true;
508 | }
509 |
510 | return false;
511 | },
512 | enumerable: !1,
513 | writable: !1,
514 | },
515 | setConds: {
516 | set(conditions) {
517 | if (!isObj(conditions)) runInvalidSetCondsValueError(conditions);
518 |
519 | // eslint-disable-next-line prefer-const
520 | for (let [prop, cond] of Object.entries(conditions)) {
521 | if (reservedProps.has(prop)) {
522 | runReservedPropWarning(prop);
523 | continue;
524 | }
525 |
526 | cond = isCallable(cond) ? cond.call(data) : cond;
527 |
528 | if (!isBool(cond)) runInvalidConditionalPropValueError(prop);
529 |
530 | if (!hasOwnProperty(this, prop)) {
531 | runNotDefinedConditionalPropWarning(prop);
532 | continue;
533 | }
534 |
535 | if (this[prop] == cond) continue;
536 |
537 | proxyTarget[prop] = cond;
538 |
539 | runObserveCallBack(prop, cond);
540 | }
541 |
542 | checkWhatToRender(proxyTarget);
543 | },
544 | enumerable: !1,
545 | },
546 | });
547 |
548 | return reactor;
549 | }
550 |
--------------------------------------------------------------------------------
/core/renderlist/errors.js:
--------------------------------------------------------------------------------
1 | import { consW, syErr, valueType, err } from "../helpers.js";
2 |
3 | export function runCanNotDefineReactivePropWarning() {
4 | consW(`Inter failed to define reactivity
5 | in a plain Javascript object, because it is not configurable.`);
6 | }
7 |
8 | export function runDetecteReservedPropdWarnig(prop) {
9 | consW(
10 | `"${prop}" is a reserved property, do not create a property with this name.`
11 | );
12 | }
13 |
14 | export function runInvalidDefinePropsValueError(props) {
15 | syErr(`The value of "defineProps" must be a plain Javascript object, and you
16 | defined "${valueType(props)}" as its value`);
17 | }
18 |
19 | export function runInvalidSetPropsValueError(props) {
20 | syErr(`The value of "setProps" must be a plain Javascript object, and you
21 | defined "${valueType(props)}" as its value`);
22 | }
23 |
24 | export function runInvalidDeletePropsValueError(props) {
25 | syErr(`The value of "deleteProps" must be an Array object, and you
26 | defined "${valueType(props)}" as its value`);
27 | }
28 |
29 | export function runNotConfigurableArrayError() {
30 | err(`Inter failed to define the reactivity,
31 | because the Array of the each option is not configurable.`);
32 | }
33 |
34 | export function runUnsupportedEachValueError(value) {
35 | syErr(`"${valueType(
36 | value
37 | )}" is not a valid value for the "each" option in renderList.
38 | The values that are accepted in "each" option, are:
39 | Array.
40 | Plain js object.
41 | Number.
42 | Map.
43 | Set.`);
44 | }
45 |
46 | export function runInvalidAddItemsSecodArgumentError() {
47 | syErr("The second argument of [LIST REACTOR].addItems must be a number.");
48 | }
49 |
50 | export function runInvalidAddItemsFirstArgumentError() {
51 | syErr("The first argument of [LIST REACTOR ].addItems must be an Array.");
52 | }
53 |
54 | export function runInvalidTemplateReturnError() {
55 | syErr(`The template function is not being returned inside the "do" method in
56 | renderList(reactive listing), just return the template function.`);
57 | }
58 |
--------------------------------------------------------------------------------
/core/renderlist/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | syErr,
3 | isObj,
4 | isCallable,
5 | validInProperty,
6 | validEachProperty,
7 | Iterable,
8 | isAtag,
9 | getId,
10 | consW,
11 | isArray,
12 | isDefined,
13 | isMap,
14 | isSet,
15 | isFalse,
16 | isNotConfigurable,
17 | validStyleName,
18 | validDomEvent,
19 | isValidTemplateReturn,
20 | isPositiveValue,
21 | isNegativeValue,
22 | hasOwnProperty,
23 | isTrue,
24 | isTringOrNumber,
25 | } from "../helpers.js";
26 |
27 | import {
28 | runCanNotDefineReactivePropWarning,
29 | runDetecteReservedPropdWarnig,
30 | runInvalidAddItemsFirstArgumentError,
31 | runInvalidAddItemsSecodArgumentError,
32 | runInvalidDefinePropsValueError,
33 | runInvalidDeletePropsValueError,
34 | runInvalidSetPropsValueError,
35 | runInvalidTemplateReturnError,
36 | runNotConfigurableArrayError,
37 | runUnsupportedEachValueError,
38 | } from "./errors.js";
39 |
40 | import { toDOM } from "../template/index.js";
41 |
42 | import {
43 | runIllegalAttrsPropWarning,
44 | runInvalidEventHandlerWarning,
45 | runInvalidEventWarning,
46 | runInvalidStyleWarning,
47 | runInvalidStyleValue,
48 | } from "../template/errors.js";
49 |
50 | /**
51 | * Reactive system for listing.
52 | *
53 | */
54 |
55 | function checkType(arg, call, _, indexObj) {
56 | if (isObj(arg)) defineReactiveObj(arg, call, indexObj);
57 | else if (isArray(arg)) defineReactiveArray(arg, call, indexObj);
58 | else if (isMap(arg)) defineReactiveMap(arg, call);
59 | else if (isSet(arg)) defineReactiveSet(arg, call, false, null, indexObj);
60 | }
61 |
62 | function defineReactiveSymbol(obj) {
63 | if (hasReactiveSymbol(obj)) return false;
64 | const symbol = Symbol.for("reactive");
65 |
66 | Object.defineProperty(obj, symbol, {
67 | get: () => true,
68 | });
69 | }
70 |
71 | function hasReactiveSymbol(obj) {
72 | const symbol = Symbol.for("reactive");
73 |
74 | return hasOwnProperty(obj, symbol);
75 | }
76 |
77 | function defineReactiveObj(obj, renderingSystem, indexObj) {
78 | const reservedProps = new Set(["setProps", "defineProps", "deleteProps"]);
79 |
80 | function defineReservedProps(props) {
81 | for (const { name, setHandler } of props) {
82 | Object.defineProperty(obj, name, {
83 | set: setHandler,
84 | });
85 | }
86 | }
87 |
88 | const indexSymbol = Symbol.for("index");
89 | if (isObj(indexObj)) {
90 | obj[indexSymbol] = indexObj;
91 | }
92 |
93 | function defineReactiveProp(prop) {
94 | let readValue = obj[prop];
95 |
96 | obj[prop] = void 0;
97 | Object.defineProperty(obj, prop, {
98 | set(newValue) {
99 | readValue = newValue;
100 |
101 | if (isTringOrNumber(newValue) && readValue == newValue) return;
102 |
103 | if (obj[indexSymbol]) {
104 | const index = obj[indexSymbol].index;
105 | renderingSystem(index);
106 | } else renderingSystem();
107 |
108 | const hasIndexObj = isObj(indexObj);
109 |
110 | checkType(
111 | newValue,
112 | renderingSystem,
113 | null,
114 | hasIndexObj ? indexObj : null
115 | );
116 | },
117 |
118 | get() {
119 | return readValue;
120 | },
121 | configurable: !0,
122 | });
123 | }
124 |
125 | function deleteProps(props) {
126 | if (!isArray(props)) runInvalidDeletePropsValueError(props);
127 | const index = isObj(indexObj) ? indexObj.index : void 0;
128 | for (const prop of props) {
129 | if (typeof prop !== "string") continue;
130 | else if (!hasOwnProperty(obj, prop)) continue;
131 | else if (!reservedProps.has(prop)) delete obj[prop];
132 | }
133 |
134 | renderingSystem(index);
135 | }
136 |
137 | function defineProps(props) {
138 | if (!isObj(props)) runInvalidDefinePropsValueError(props);
139 | const index = isObj(indexObj) ? indexObj.index : void 0;
140 | for (const [prop, value] of Object.entries(props)) {
141 | if (!(prop in this) && !reservedProps.has(prop)) {
142 | obj[prop] = value;
143 | defineReactiveProp(prop);
144 | checkType(obj[prop], renderingSystem, null, indexObj);
145 | }
146 |
147 | renderingSystem(index);
148 | }
149 | }
150 |
151 | function setProps(props) {
152 | if (!isObj(props)) runInvalidSetPropsValueError(props);
153 |
154 | for (const [prop, value] of Object.entries(props)) {
155 | if (!reservedProps.has(prop)) obj[prop] = value;
156 | }
157 | }
158 |
159 | if (hasReactiveSymbol(obj)) {
160 | //The object is already reactive
161 | //So, we must skip all the task.
162 |
163 | return true;
164 | }
165 |
166 | if (isNotConfigurable(obj)) {
167 | runCanNotDefineReactivePropWarning();
168 | return false;
169 | }
170 |
171 | for (const prop of Object.keys(obj)) {
172 | if (reservedProps.has(prop)) runDetecteReservedPropdWarnig(prop);
173 |
174 | defineReactiveProp(prop);
175 |
176 | checkType(obj[prop], renderingSystem, null, indexObj);
177 | }
178 |
179 | const reservedPropsSetting = [
180 | { name: "defineProps", setHandler: defineProps },
181 | { name: "setProps", setHandler: setProps },
182 | { name: "deleteProps", setHandler: deleteProps },
183 | ];
184 |
185 | defineReservedProps(reservedPropsSetting);
186 | defineReactiveSymbol(obj);
187 | }
188 |
189 | function exactElToRemove(obj) {
190 | if (isObj(obj)) _inObj(...arguments);
191 | else if (isSet(obj)) _inSet(...arguments);
192 | else _inMap(...arguments);
193 | }
194 |
195 | function _inObj(obj, key, root) {
196 | const keys = Object.keys(obj);
197 |
198 | keys.some((prop, i) => {
199 | if (prop == key) _exactRemove(root, i);
200 | });
201 | }
202 |
203 | function _inSet(set, key, root) {
204 | const obj = Array.from(set);
205 |
206 | obj.some((item, i) => {
207 | if (item == key) _exactRemove(root, i);
208 | });
209 | }
210 |
211 | function _inMap(obj, key, root) {
212 | let i = -1;
213 |
214 | obj.forEach(() => {
215 | i++;
216 | const prop = arguments[1];
217 |
218 | if (prop == key) _exactRemove(root, i);
219 | });
220 | }
221 |
222 | function _exactRemove(root, i) {
223 | const elToRmove = root.children[i];
224 |
225 | if (isAtag(elToRmove)) root.removeChild(elToRmove);
226 | }
227 |
228 | function runObserveCallBack(each, proxy) {
229 | const observe = Symbol.for("observe");
230 | if (typeof each[observe] === "function")
231 | each[observe](isDefined(proxy) ? proxy : each);
232 | }
233 |
234 | function createArrayReactor(each, renderingSystem) {
235 | if (isNotConfigurable(each)) runNotConfigurableArrayError();
236 |
237 | const customProps = new Set(["addItems", "setEach"]);
238 |
239 | return new Proxy(each, {
240 | set(target, prop, value, proxy) {
241 | if (customProps.has(prop)) {
242 | Reflect.set(...arguments);
243 | return true;
244 | }
245 |
246 | Reflect.set(...arguments);
247 |
248 | runObserveCallBack(each, proxy);
249 |
250 | renderingSystem();
251 |
252 | if (typeof value !== "number" && validEachProperty(value))
253 | checkType(value, renderingSystem);
254 |
255 | return true;
256 | },
257 |
258 | get(target, prop) {
259 | /**
260 | * Note: Don't use Reflet.get(...arguments) here, because if
261 | * it's an Array of objects it will return an empty object.
262 | *
263 | */
264 |
265 | return target[prop];
266 | },
267 | });
268 | }
269 |
270 | function defineListReactorSetProps(obj, renderingSystem) {
271 | Object.defineProperty(obj, "setProps", {
272 | set(props) {
273 | if (!isObj(props)) runInvalidSetPropsValueError();
274 |
275 | for (const [prop, value] of Object.entries(props)) {
276 | if (isObj(obj)) this[prop] = value;
277 | else if (isMap(obj)) obj.set(prop, value);
278 |
279 | checkType(value, renderingSystem);
280 | }
281 |
282 | if (isObj(obj)) renderingSystem();
283 | },
284 | });
285 | }
286 |
287 | function createObjReactor(each, renderingSystem, root) {
288 | if (isNotConfigurable(each)) runNotConfigurableArrayError();
289 |
290 | defineListReactorSetProps(each, renderingSystem);
291 |
292 | const specialProps = new Set(["observe"]);
293 | const settableRservedProps = new Set(["setEach", "setProps"]);
294 |
295 | function isNotReservedSettableProp(prop) {
296 | return !settableRservedProps.has(prop);
297 | }
298 | defineReactiveSymbol(each);
299 |
300 | return new Proxy(each, {
301 | set(target, prop, value, proxy) {
302 | if (specialProps.has(prop)) return false;
303 | if (isTringOrNumber(value) && value == target[prop]) return false;
304 |
305 | Reflect.set(...arguments);
306 |
307 | if (isNotReservedSettableProp(prop)) {
308 | renderingSystem();
309 | runObserveCallBack(each, proxy);
310 |
311 | if (typeof value !== "number" && validEachProperty(value))
312 | checkType(value, renderingSystem);
313 | }
314 |
315 | return true;
316 | },
317 |
318 | get() {
319 | return Reflect.get(...arguments);
320 | },
321 |
322 | deleteProperty(target, prop, proxy) {
323 | if (prop in target) {
324 | exactElToRemove(target, prop, root);
325 | Reflect.deleteProperty(...arguments);
326 | renderingSystem();
327 | runObserveCallBack(each, proxy);
328 |
329 | return true;
330 | }
331 |
332 | consW(`You are trying to delete the "${prop}" property in the list
333 | reactor, but that property does not exist in the list reactor.`);
334 | },
335 | });
336 | }
337 |
338 | function mutateArrayMap(array) {
339 | Object.defineProperty(array, "map", {
340 | value(callBack) {
341 | const newArray = new Array();
342 | newArray.reactor = this;
343 | let index = -1;
344 |
345 | for (const item of this) {
346 | index++;
347 |
348 | const returnValue = callBack(item, index, this);
349 | newArray.push(returnValue);
350 | }
351 |
352 | return newArray;
353 | },
354 | });
355 | }
356 |
357 | function defineReactiveArray(array, renderingSystem, indexObj) {
358 | if (hasReactiveSymbol(array)) return false;
359 |
360 | const mutationMethods = [
361 | "push",
362 | "unshift",
363 | "pop",
364 | "shift",
365 | "splice",
366 | "sort",
367 | "reverse",
368 | ];
369 |
370 | for (const method of mutationMethods) {
371 | Object.defineProperty(array, method, {
372 | value(start, deleteCount, ...items) {
373 | if (method == "pop")
374 | this.mutationInfo = {
375 | method: "pop",
376 | renderingSystem: renderingSystem,
377 | };
378 | else if (method == "shift")
379 | this.mutationInfo = {
380 | method: "shift",
381 | renderingSystem: renderingSystem,
382 | };
383 | else if (method == "push")
384 | this.mutationInfo = {
385 | method: "push",
386 | itemsLength: arguments.length,
387 | renderingSystem: renderingSystem,
388 | };
389 | else if (method == "unshift")
390 | this.mutationInfo = {
391 | method: "unshift",
392 | itemsLength: arguments.length,
393 | renderingSystem: renderingSystem,
394 | };
395 | else if (method == "splice") {
396 | this.mutationInfo = {
397 | method: "splice",
398 | start: start,
399 | deleteCount: deleteCount,
400 | itemsLength: isDefined(items) ? items.length : 0,
401 | renderingSystem: renderingSystem,
402 | };
403 | }
404 |
405 | const ArrayPrototypeMethodReturn = Array.prototype[method].apply(
406 | this,
407 | arguments
408 | );
409 |
410 | renderingSystem();
411 |
412 | this.mutationInfo = void 0;
413 |
414 | if (method === "push" || method === "unshift") {
415 | for (const arg of arguments) {
416 | checkType(arg, renderingSystem, null, indexObj);
417 | }
418 | } else if (method === "splice" && isDefined(items)) {
419 | for (const item of items) {
420 | checkType(item, renderingSystem, null, indexObj);
421 | }
422 | }
423 |
424 | return ArrayPrototypeMethodReturn;
425 | },
426 | });
427 | }
428 |
429 | walkArray(array, renderingSystem, indexObj);
430 | defineReactiveSymbol(array);
431 | mutateArrayMap(array);
432 | }
433 |
434 | function defineReactiveMap(map, renderingSystem, listReactor, root) {
435 | if (hasReactiveSymbol(map)) return false;
436 |
437 | const mutationMethods = ["set", "delete", "clear"];
438 |
439 | for (const method of mutationMethods) {
440 | Object.defineProperty(map, method, {
441 | value() {
442 | if (method == "delete" && listReactor)
443 | exactElToRemove(this, arguments[0], root);
444 | const MapPrototypeMethodReturn = Map.prototype[method].apply(
445 | this,
446 | arguments
447 | );
448 | if (listReactor) runObserveCallBack(this);
449 | renderingSystem();
450 |
451 | if (method == "set") {
452 | const value = arguments[1];
453 |
454 | checkType(value, renderingSystem);
455 | }
456 |
457 | return MapPrototypeMethodReturn;
458 | },
459 | });
460 | }
461 |
462 | walkMap(map, renderingSystem);
463 | defineReactiveSymbol(map);
464 | if (listReactor) defineListReactorSetProps(map, renderingSystem);
465 | }
466 |
467 | function defineReactiveSet(set, renderingSystem, listReactor, root, indexObj) {
468 | if (hasReactiveSymbol(set)) return false;
469 |
470 | const mutationMethods = ["add", "clear", "delete"];
471 |
472 | for (const method of mutationMethods) {
473 | Object.defineProperty(set, method, {
474 | value() {
475 | if (method == "delete" && listReactor)
476 | exactElToRemove(this, arguments[0], root);
477 | const SetPrototypeMethodReturn = Set.prototype[method].apply(
478 | this,
479 | arguments
480 | );
481 | renderingSystem();
482 | if (listReactor) runObserveCallBack(this);
483 | if (method === "add") {
484 | checkType(arguments[0], renderingSystem);
485 | }
486 |
487 | return SetPrototypeMethodReturn;
488 | },
489 | });
490 | }
491 |
492 | walkSet(set, renderingSystem, indexObj);
493 | defineReactiveSymbol(set);
494 | }
495 |
496 | function walkMap(map, call) {
497 | /**
498 | * The goal here is to iterate through the map collection
499 | * and if we found an object, an array, a set or even a map, we must make it reactive.
500 | *
501 | */
502 |
503 | map.forEach((value) => {
504 | checkType(value, call);
505 | });
506 | }
507 |
508 | function walkArray(array, call, indexObj) {
509 | for (const item of array) {
510 | checkType(item, call, null, indexObj);
511 | }
512 | }
513 |
514 | function walkSet(set, call, indexObj) {
515 | set.forEach((value) => {
516 | checkType(value, call, null, indexObj);
517 | });
518 | }
519 |
520 | function redefineArrayMutationMethods(array, htmlEl, renderingSystem, DO, pro) {
521 | function render(item, i, start, secondI) {
522 | const temp = DO.call(pro, item, i, pro);
523 | const newChild = toDOM(temp.element);
524 | const domChild = htmlEl.children[start];
525 |
526 | if (!isValidTemplateReturn(temp)) runInvalidTemplateReturnError();
527 |
528 | if (newChild && isDefined(start)) {
529 | htmlEl.insertBefore(newChild, domChild);
530 | } else {
531 | htmlEl.appendChild(newChild);
532 | }
533 |
534 | if (isDefined(secondI)) i = secondI;
535 |
536 | renderingSystem(i, true);
537 | }
538 |
539 | function ArrayPrototypeShiftHandler() {
540 | const ArrayPrototypeShiftReturn = Array.prototype.shift.apply(
541 | array,
542 | void 0
543 | );
544 | const firstNodeElement = htmlEl.children[0];
545 |
546 | if (firstNodeElement) {
547 | htmlEl.removeChild(firstNodeElement);
548 |
549 | renderingSystem();
550 | runObserveCallBack(array);
551 | }
552 |
553 | return ArrayPrototypeShiftReturn;
554 | }
555 |
556 | function ArrayPrototypePopHandler() {
557 | const ArrayPrototypePopReturn = Array.prototype.pop.apply(array, arguments);
558 | const children = htmlEl.children;
559 | const lastNodeElement = children[children.length - 1];
560 |
561 | if (lastNodeElement) {
562 | htmlEl.removeChild(lastNodeElement);
563 | renderingSystem();
564 | runObserveCallBack(array);
565 | }
566 |
567 | return ArrayPrototypePopReturn;
568 | }
569 |
570 | function ArrayPrototypePushHandler() {
571 | const ArrayPrototypePushReturn = Array.prototype.push.apply(
572 | array,
573 | arguments
574 | );
575 |
576 | if (arguments.length == 1) render(...arguments, array.length - 1);
577 | else if (arguments.length > 1) {
578 | let length = arguments.length;
579 | for (const item of arguments) render(item, array.length - length--);
580 | }
581 |
582 | renderingSystem();
583 | runObserveCallBack(array);
584 |
585 | return ArrayPrototypePushReturn;
586 | }
587 |
588 | function ArrayPrototypeUnshiftHandler() {
589 | const ArrayPrototypeUnshiftReturn = Array.prototype.unshift.apply(
590 | array,
591 | arguments
592 | );
593 |
594 | if (arguments.length > 1) {
595 | let i = arguments.length;
596 |
597 | for (let index = i - 1; index > -1; index--)
598 | render(arguments[--i], 0, 0, i);
599 | } else if (arguments.length == 1) render(...arguments, 0, 0);
600 |
601 | renderingSystem();
602 | runObserveCallBack(array);
603 |
604 | return ArrayPrototypeUnshiftReturn;
605 | }
606 |
607 | function ArrayPrototypeSpliceHandler(start, deleteCount, ...items) {
608 | const ArrayPrototypeSpliceReturn = Array.prototype.splice.apply(
609 | array,
610 | arguments
611 | );
612 |
613 | function deleteChildren() {
614 | const length = deleteCount;
615 | for (let i = 0; i < length; i++) {
616 | const child = htmlEl.children[start];
617 |
618 | if (child) htmlEl.removeChild(child);
619 | }
620 | }
621 |
622 | function insertBehind() {
623 | for (let i = items.length - 1; i > -1; i--) render(items[i], i, start);
624 | }
625 |
626 | if (deleteCount > 0 && items.length > 0) {
627 | deleteChildren();
628 | insertBehind();
629 | }
630 |
631 | if (items.length == 0) deleteChildren();
632 | else if (deleteCount == 0 && items.length > 0) insertBehind();
633 |
634 | renderingSystem();
635 |
636 | runObserveCallBack(array);
637 |
638 | return ArrayPrototypeSpliceReturn;
639 | }
640 |
641 | const mutatedMethods = [
642 | { name: "unshift", handler: ArrayPrototypeUnshiftHandler },
643 | { name: "shift", handler: ArrayPrototypeShiftHandler },
644 | { name: "push", handler: ArrayPrototypePushHandler },
645 | { name: "pop", handler: ArrayPrototypePopHandler },
646 | { name: "splice", handler: ArrayPrototypeSpliceHandler },
647 | ];
648 |
649 | if (isNotConfigurable(array)) return false;
650 |
651 | //It is already reactive array.
652 | if (hasReactiveSymbol(array)) return false;
653 |
654 | for (const { name, handler } of mutatedMethods) {
655 | Object.defineProperty(array, name, {
656 | value: handler,
657 | });
658 | }
659 | }
660 |
661 | export function renderList(options) {
662 | function defineListReactor(each, renderingSystem, root) {
663 | if (isArray(each)) {
664 | defineCustomArrayProps(each);
665 | return createArrayReactor(each, renderingSystem);
666 | } else if (isObj(each)) {
667 | return createObjReactor(each, renderingSystem, root);
668 | } else if (isSet(each)) {
669 | defineReactiveSet(each, renderingSystem, true, root);
670 |
671 | return each;
672 | } else {
673 | if (isMap(each)) {
674 | defineReactiveMap(each, renderingSystem, true, root);
675 |
676 | return each;
677 | }
678 | }
679 | }
680 |
681 | if (new.target !== void 0) {
682 | syErr(`renderList is not a constructor, do not call
683 | it with the "new" keyword.`);
684 | }
685 |
686 | if (!isObj(options)) {
687 | syErr(
688 | "The options(the argument of renderList) must be a plain Javascript object."
689 | );
690 | }
691 |
692 | /*eslint-disable prefer-const*/
693 |
694 | let { in: IN, each, do: DO, optimize } = options;
695 |
696 | /*eslint-enable prefer-const*/
697 |
698 | const root = getId(IN);
699 |
700 | if (!validInProperty(IN)) {
701 | syErr("The 'in' option in renderList must be a string.");
702 | }
703 |
704 | if (!validEachProperty(each)) runUnsupportedEachValueError(each);
705 |
706 | if (!isCallable(DO)) {
707 | syErr(
708 | "The value of the 'do' option in renderList must be only a function."
709 | );
710 | }
711 |
712 | if (isDefined(optimize) && !isTrue(optimize)) {
713 | syErr("The value of the 'optimize' option in renderList must be only true");
714 | }
715 |
716 | if (isDefined(optimize) && !isArray(each)) {
717 | syErr(
718 | "The 'optimize' option can only be enabled when the each's value is an Array."
719 | );
720 | }
721 |
722 | let pro,
723 | firstRender = true;
724 |
725 | function setEachHandler(newEach) {
726 | if (!validEachProperty(newEach)) runUnsupportedEachValueError(newEach);
727 |
728 | const observeSymbol = Symbol.for("observe");
729 | newEach[observeSymbol] = each[observeSymbol];
730 | each = newEach;
731 |
732 | if (!hasReactiveSymbol(newEach)) proSetup();
733 |
734 | renderingSystem();
735 | runObserveCallBack(each);
736 |
737 | if (typeof each !== "number") {
738 | const iterable = new Iterable(each);
739 |
740 | iterable.each((data, index, type) => {
741 | if (type == "object") checkType(data[1], renderingSystem);
742 | else if (type == "array" || type == "set")
743 | checkType(data, renderingSystem);
744 | });
745 | }
746 | }
747 |
748 | function proSetup() {
749 | if (hasReactiveSymbol(each)) return false;
750 | Object.defineProperties(each, {
751 | setEach: { set: setEachHandler },
752 | observe: {
753 | value(callBack) {
754 | const observe = Symbol.for("observe");
755 | if (typeof this[observe] === "function") return false;
756 | if (!isCallable(callBack))
757 | syErr("The argument of the observe method must be a function.");
758 | else {
759 | Object.defineProperty(this, observe, {
760 | value: callBack,
761 | configurable: !1,
762 | });
763 |
764 | return true;
765 | }
766 | },
767 | },
768 | });
769 |
770 | pro = defineListReactor(each, renderingSystem, root, true);
771 |
772 | if (isArray(each))
773 | redefineArrayMutationMethods(each, root, renderingSystem, DO, pro);
774 |
775 | defineReactiveSymbol(each);
776 | }
777 |
778 | function defineProp(obj, prop, descriptiors) {
779 | Object.defineProperty(obj, prop, descriptiors);
780 | }
781 |
782 | function defineCustomArrayProps(array) {
783 | if (hasReactiveSymbol(array)) return false;
784 |
785 | function addItemsHandler(items, position) {
786 | if (isDefined(position) && typeof position !== "number")
787 | runInvalidAddItemsSecodArgumentError();
788 |
789 | if (!isArray(items)) runInvalidAddItemsFirstArgumentError();
790 | if (!isDefined(position) || position > this.length - 1) {
791 | for (const item of items) {
792 | this.push(item);
793 | }
794 | } else if (position == 0 || position < 0) {
795 | for (let i = items.length - 1; i > -1; i--) {
796 | this.unshift(items[i]);
797 | }
798 | } else {
799 | for (let i = items.length - 1; i > -1; i--) {
800 | this.splice(position, 0, items[i]);
801 | }
802 | }
803 | }
804 |
805 | const customProps = [{ name: "addItems", handler: addItemsHandler }];
806 |
807 | for (const { name, handler } of customProps)
808 | defineProp(array, name, { value: handler });
809 | }
810 |
811 | if (typeof each !== "number") proSetup();
812 |
813 | function renderingSystem(__index__, perfOptimization) {
814 | const iterable = new Iterable(each);
815 |
816 | synchronizeRootChildrenLengthAndSourceLength(root, iterable);
817 |
818 | iterable.each((data, index, type) => {
819 | let newTemp, indexObj;
820 |
821 | if (type == "array") {
822 | if (isDefined(__index__)) {
823 | data = pro[__index__];
824 | index = __index__;
825 | iterable.break = true;
826 | }
827 |
828 | const indexSymbol = Symbol.for("index");
829 | const canOptimize = () =>
830 | isTrue(optimize) &&
831 | (isObj(data) || isArray(data) || isSet(data)) &&
832 | !hasOwnProperty(data, indexSymbol);
833 | indexObj = {
834 | index: index,
835 | sourceLength: pro.length,
836 | };
837 |
838 | if (canOptimize()) data[indexSymbol] = indexObj;
839 | else if (
840 | (isObj(data) || isArray(data) || isSet(data)) &&
841 | hasOwnProperty(data, indexSymbol)
842 | ) {
843 | const hasDifferentSourceLength = () =>
844 | data[indexSymbol].sourceLength !== indexObj.sourceLength;
845 | if (hasDifferentSourceLength())
846 | shareProps(data[indexSymbol], indexObj);
847 | }
848 | }
849 |
850 | if (firstRender || perfOptimization) {
851 | checkType(
852 | type !== "object" ? data : data[1] /*obj prop*/,
853 | renderingSystem,
854 | DO,
855 | isTrue(optimize) ? indexObj : null
856 | );
857 | }
858 |
859 | if (perfOptimization) return;
860 |
861 | function checkIterationSourceType() {
862 | if (type === "array") {
863 | newTemp = DO.call(pro, data, index, pro);
864 | } else if (type === "object") {
865 | newTemp = DO.call(pro, data[0] /*prop*/, data[1] /*value*/, pro);
866 | } else if (type === "number") {
867 | newTemp = DO(data);
868 | } else {
869 | //The type is set.
870 |
871 | newTemp = DO.call(pro, data, pro);
872 | }
873 | }
874 |
875 | checkIterationSourceType();
876 |
877 | // The function is returning the template.
878 | if (isValidTemplateReturn(newTemp)) {
879 | const currentEl = root.children[index];
880 |
881 | if (!isAtag(currentEl)) {
882 | root.appendChild(toDOM(newTemp.element));
883 | } else {
884 | if (!currentEl.template) {
885 | consW("Avoid manipulating what Inter manipulates.");
886 |
887 | /**
888 | * currentEl was not rendered by Inter, in
889 | * this case we must replace it with an element
890 | * rendered by Inter to avoid diffing problems.
891 | */
892 |
893 | root.replaceChild(toDOM(newTemp.element), currentEl);
894 | } else {
895 | runDiff(newTemp.element, currentEl.template, currentEl);
896 | }
897 | }
898 | } else runInvalidTemplateReturnError();
899 | });
900 | }
901 |
902 | renderingSystem();
903 |
904 | firstRender = false;
905 |
906 | return pro;
907 | }
908 |
909 | function runDiff(newTemp, oldTemp, oldRoot) {
910 | const diff = {
911 | children: true,
912 | continue: true,
913 | };
914 |
915 | runContainerDiffing(newTemp, oldTemp, diff);
916 |
917 | if (diff.children && newTemp.children && newTemp.children.length > 0) {
918 | runChildrenDiffing(newTemp.children, oldTemp.children, oldRoot, diff);
919 | }
920 | }
921 |
922 | function isOneAnArrayAndOtherNot(first, second) {
923 | return (
924 | (isArray(first) && !isArray(second)) || (!isArray(first) && isArray(second))
925 | );
926 | }
927 |
928 | function AreBothArray(first, second) {
929 | return isArray(first) && isArray(second);
930 | }
931 |
932 | function getValue(text) {
933 | if (typeof text === "function") text = text();
934 | return text;
935 | }
936 |
937 | function runNestedListDiffing(reactor, target, newChildren, oldChildren) {
938 | if (reactor.mutationInfo == void 0) return;
939 | const {
940 | mutationInfo: { method, start, deleteCount, itemsLength },
941 | } = reactor;
942 |
943 | function addByPush() {
944 | let i = itemsLength;
945 |
946 | for (; i > 0; i--) {
947 | const child = newChildren[newChildren.length - i];
948 |
949 | target.appendChild(toDOM(child, true, child.index));
950 | oldChildren.push(child);
951 | }
952 | }
953 |
954 | function AddByUnShiftOrSplice(mutationMethod) {
955 | function insertBehind(start, itemsLength) {
956 | for (let i = itemsLength - 1; i > -1; i--) {
957 | const child = target.children[start];
958 | const virtualChild = newChildren[i];
959 | const newChild = toDOM(virtualChild, true, virtualChild.index);
960 |
961 | if (child) target.insertBefore(newChild, child);
962 | else target.appendChild(newChild);
963 |
964 | addedtems.unshift(virtualChild);
965 | }
966 | }
967 |
968 | const addedtems = new Array();
969 |
970 | if (mutationMethod == "splice" && deleteCount == 0 && itemsLength > 0) {
971 | insertBehind(start, itemsLength);
972 | oldChildren.splice(start, deleteCount, ...addedtems);
973 | } else if (mutationMethod == "splice" && deleteCount > 0) {
974 | for (let i = 0; i < deleteCount; i++) {
975 | const child = target.children[start];
976 |
977 | if (child) target.removeChild(child);
978 | }
979 |
980 | insertBehind(start, itemsLength);
981 |
982 | oldChildren.splice(start, deleteCount, addedtems);
983 | } else if (mutationMethod == "unshift") {
984 | insertBehind(0, itemsLength);
985 |
986 | oldChildren.unshift(...addedtems);
987 | }
988 | }
989 |
990 | function deleteBySplice() {
991 | let i = start;
992 | for (; newChildren.length < target.children.length; i++) {
993 | const elToRemove = target.children[start];
994 | if (elToRemove) target.removeChild(elToRemove);
995 | }
996 |
997 | oldChildren.splice(start, deleteCount);
998 | }
999 |
1000 | const lastNodeElement = target.children[target.children.length - 1];
1001 | const firstNodeElement = target.children[0];
1002 | if (method == "pop" && lastNodeElement) {
1003 | target.removeChild(lastNodeElement);
1004 | oldChildren.pop();
1005 | } else if (method == "shift" && firstNodeElement) {
1006 | target.removeChild(firstNodeElement);
1007 | oldChildren.shift();
1008 | } else if (method == "push") addByPush();
1009 | else if (method == "unshift") AddByUnShiftOrSplice(method);
1010 | else if (method == "splice") {
1011 | if (
1012 | typeof start == "number" &&
1013 | typeof deleteCount == "number" &&
1014 | itemsLength == 0
1015 | )
1016 | deleteBySplice();
1017 | else if (itemsLength > 0) AddByUnShiftOrSplice(method);
1018 | else if (deleteCount == void 0) {
1019 | const data = {
1020 | source: {
1021 | values: newChildren,
1022 | },
1023 | };
1024 |
1025 | synchronizeRootChildrenLengthAndSourceLength(target, data);
1026 | }
1027 | }
1028 | }
1029 |
1030 | function runContainerDiffing(newContainer, oldContainer, diff) {
1031 | const {
1032 | attrs: newAttrs = {},
1033 | events: newEvents = {},
1034 | styles: newStyles = {},
1035 | children: newChildren,
1036 | } = newContainer;
1037 |
1038 | const {
1039 | attrs: oldAttrs = {},
1040 | events: oldEvents = {},
1041 | styles: oldStyles = {},
1042 | children: oldChildren,
1043 | target,
1044 | } = oldContainer;
1045 |
1046 | let reactor;
1047 |
1048 | if (isArray(newChildren)) reactor = newChildren.reactor;
1049 |
1050 | if (reactor != void 0)
1051 | runNestedListDiffing(reactor, target, newChildren, oldChildren);
1052 |
1053 | const rootEL = target.parentNode;
1054 | const newText = getValue(newContainer.text);
1055 | const oldText = getValue(oldContainer.text);
1056 | const newTag = getValue(newContainer.tag);
1057 | const oldTag = getValue(oldContainer.tag);
1058 |
1059 | if (newTag !== oldTag) {
1060 | const newElement = toDOM(newContainer);
1061 |
1062 | rootEL.replaceChild(newElement, target);
1063 |
1064 | diff.children = false;
1065 |
1066 | shareProps(oldContainer, newContainer);
1067 | oldContainer.target = newElement;
1068 | } else if (isOneAnArrayAndOtherNot(newChildren, oldChildren)) {
1069 | const newElement = toDOM(newContainer);
1070 |
1071 | rootEL.replaceChild(newElement, target);
1072 |
1073 | diff.children = false;
1074 | shareProps(oldContainer, newContainer);
1075 | oldContainer.target = newElement;
1076 | } else if (
1077 | AreBothArray(newChildren, oldChildren) &&
1078 | newChildren.length !== oldChildren.length
1079 | ) {
1080 | const newElement = toDOM(newContainer);
1081 |
1082 | rootEL.replaceChild(newElement, target);
1083 |
1084 | diff.children = false;
1085 | shareProps(oldContainer, newContainer);
1086 | oldContainer.target = newElement;
1087 | } else if (!isDefined(newChildren) && !isDefined(oldChildren)) {
1088 | if (newText !== oldText) {
1089 | target.textContent = newText;
1090 |
1091 | shareProps(oldContainer, newContainer);
1092 | }
1093 | }
1094 |
1095 | runAttributeDiffing(target, oldAttrs, newAttrs);
1096 | runEventDiffing(target, oldEvents, newEvents);
1097 | runStyleDiffing(target, oldStyles, newStyles);
1098 | }
1099 |
1100 | function shareProps(target, source) {
1101 | Object.assign(target, source);
1102 | }
1103 |
1104 | function getGreater(firstArray, secondArray) {
1105 | return firstArray.length > secondArray.length ? firstArray : secondArray;
1106 | }
1107 |
1108 | function runAttributeDiffing(target, oldAttributes, newAttributes) {
1109 | function removeAttr(attr) {
1110 | if (target.hasAttribute(attr)) {
1111 | target.removeAttribute(attr);
1112 | } else if (specialAttrs.has(attr)) {
1113 | if (attr === "checked") target.checked = false;
1114 | else target[attr] = "";
1115 | }
1116 | }
1117 |
1118 | const oldAttrsArray = Object.keys(oldAttributes),
1119 | newAttrsArray = Object.keys(newAttributes),
1120 | greater = getGreater(oldAttrsArray, newAttrsArray),
1121 | specialAttrs = new Set(["value", "currentTime", "checked"]);
1122 |
1123 | for (let i = 0; greater.length > i; i++) {
1124 | const oldAttrName = oldAttrsArray[i],
1125 | newAttrName = newAttrsArray[i],
1126 | oldAttrValue = getValue(oldAttributes[oldAttrName]),
1127 | newAttrValue = getValue(newAttributes[newAttrName]);
1128 |
1129 | if (!(oldAttrName in newAttributes)) removeAttr(oldAttrName);
1130 | else if (!isDefined(newAttrValue) || isFalse(newAttrValue))
1131 | removeAttr(newAttrName);
1132 | else if (isDefined(newAttrValue) && !isFalse(newAttrValue)) {
1133 | if (
1134 | (newAttrName.startsWith("on") && validDomEvent(newAttrName)) ||
1135 | newAttrName == "style"
1136 | )
1137 | runIllegalAttrsPropWarning(newAttrName);
1138 | else if (newAttrName !== oldAttrName || newAttrValue !== oldAttrValue) {
1139 | if (specialAttrs.has(newAttrName)) target[newAttrName] = newAttrValue;
1140 | else target.setAttribute(newAttrName, newAttrValue);
1141 | }
1142 | }
1143 |
1144 | oldAttributes[oldAttrName] = newAttrValue;
1145 | }
1146 | }
1147 |
1148 | function runStyleDiffing(target, oldStyles, newStyles) {
1149 | const oldStylesArray = Object.keys(oldStyles),
1150 | newStylesArray = Object.keys(newStyles),
1151 | greater = getGreater(oldStylesArray, newStylesArray);
1152 |
1153 | for (let i = 0; greater.length > i; i++) {
1154 | const oldStyleName = oldStylesArray[i],
1155 | newStyleName = newStylesArray[i],
1156 | oldStyleValue = getValue(oldStyles[oldStyleName]),
1157 | newStyleValue = getValue(newStyles[newStyleName]);
1158 |
1159 | if (!(oldStyleName in newStyles) || !isDefined(newStyleValue)) {
1160 | const styleValue = target.style[oldStyleName];
1161 | const styleAttr = target.getAttribute("style");
1162 | if (isDefined(styleValue) && styleValue.trim().length !== 0) {
1163 | target.style[oldStyleName] = null;
1164 | }
1165 |
1166 | if (styleAttr && styleAttr.trim().length == 0)
1167 | target.removeAttribute("style");
1168 | } else if (isDefined(newStyleValue)) {
1169 | if (newStyleValue !== oldStyleValue) {
1170 | if (validStyleName(newStyleName)) {
1171 | target.style[newStyleName] = newStyleValue;
1172 |
1173 | if (!target.style[newStyleName])
1174 | runInvalidStyleValue(newStyleName, newStyleValue);
1175 | } else runInvalidStyleWarning(newStyleName);
1176 | }
1177 | }
1178 |
1179 | oldStyles[oldStyleName] = newStyleValue;
1180 | }
1181 | }
1182 |
1183 | function runEventDiffing(target, oldEvents, newEvents) {
1184 | const oldEventsArray = Object.keys(oldEvents),
1185 | newEventsArray = Object.keys(newEvents),
1186 | greater = getGreater(oldEventsArray, newEventsArray);
1187 |
1188 | for (let i = 0; greater.length > i; i++) {
1189 | const oldEventName = oldEventsArray[i],
1190 | newEventName = newEventsArray[i];
1191 |
1192 | if (!(oldEventName in newEvents) || !isDefined(newEvents[oldEventName]))
1193 | target[oldEventName] = void 0;
1194 | if (!isCallable(newEvents[newEventName]) && validDomEvent(newEventName)) {
1195 | target[oldEventName] = void 0;
1196 |
1197 | runInvalidEventHandlerWarning(newEventName);
1198 |
1199 | continue;
1200 | }
1201 |
1202 | if (isDefined(newEvents[newEventName])) {
1203 | if (validDomEvent(newEventName)) {
1204 | target[newEventName] = newEvents[newEventName];
1205 | } else runInvalidEventWarning(newEventName);
1206 | }
1207 | }
1208 | }
1209 |
1210 | function insertBefore(root, index, virtualElement) {
1211 | for (let i = 0; i < root.children.length; i++) {
1212 | const realElement = root.children[i];
1213 | if (realElement.index > index) {
1214 | root.insertBefore(virtualElement, realElement);
1215 | break;
1216 | }
1217 | }
1218 | }
1219 |
1220 | function runChildrenDiffing(__new, __old, realParent) {
1221 | const newContainer = Array.from(__new),
1222 | oldContainer = Array.from(__old);
1223 |
1224 | for (let i = 0; i < newContainer.length; i++) {
1225 | const newChild = newContainer[i],
1226 | oldChild = oldContainer[i];
1227 | let hasChildren = false;
1228 |
1229 | const {
1230 | children: newChildren = [],
1231 | events: newEvents = {},
1232 | attrs: newAttrs = {},
1233 | styles: newStyles = {},
1234 | renderIf: newRenderIf,
1235 | } = newChild;
1236 |
1237 | const {
1238 | children: oldChildren = [],
1239 | events: oldEvents = {},
1240 | attrs: oldAttrs = {},
1241 | styles: oldStyles = {},
1242 | target,
1243 | index,
1244 | } = oldChild;
1245 |
1246 | let theLastElement;
1247 | const newText = getValue(newChild.text);
1248 | const oldText = getValue(oldChild.text);
1249 | const newTag = getValue(newChild.tag);
1250 | const oldTag = getValue(oldChild.tag);
1251 | function insertConditionally() {
1252 | const newELement = toDOM(newChild, true, index);
1253 |
1254 | Object.assign(oldChild, newChild);
1255 |
1256 | oldChild.target = newELement;
1257 |
1258 | if (theLastElement && theLastElement.index > index) {
1259 | insertBefore(realParent, index, newELement);
1260 | } else {
1261 | realParent.appendChild(newELement);
1262 | }
1263 | }
1264 |
1265 | if (realParent) {
1266 | theLastElement = realParent.children[realParent.children.length - 1];
1267 | }
1268 | if (newChildren.length !== oldChildren.length) {
1269 | const { reactor } = newChildren;
1270 |
1271 | if (reactor != void 0) {
1272 | runNestedListDiffing(reactor, target, newChildren, oldChildren);
1273 | } else if (target && target.parentNode != null) {
1274 | const newElement = toDOM(newChild, true, index);
1275 |
1276 | realParent.replaceChild(newElement, target);
1277 |
1278 | Object.assign(oldChild, newChild);
1279 | oldChild.target = newElement;
1280 |
1281 | continue;
1282 | }
1283 | }
1284 |
1285 | if (newTag !== oldTag) {
1286 | const newELement = toDOM(newChild, true, index);
1287 |
1288 | Object.assign(oldChild, newChild);
1289 |
1290 | if (target && target.parentNode != null) {
1291 | realParent.replaceChild(newELement, target);
1292 | oldChild.target = newELement;
1293 | }
1294 | continue;
1295 | } else if (
1296 | isNegativeValue(newRenderIf) &&
1297 | hasOwnProperty(newChild, "renderIf")
1298 | ) {
1299 | if (target && target.parentNode != null) {
1300 | realParent.removeChild(target);
1301 | }
1302 | } else if (isPositiveValue(newRenderIf)) {
1303 | if (target && target.parentNode == null) insertConditionally();
1304 | else if (!target) insertConditionally();
1305 | }
1306 |
1307 | if (newChildren.length == oldChildren.length && newChildren.length !== 0) {
1308 | hasChildren = true;
1309 |
1310 | runChildrenDiffing(newChildren, oldChildren, target);
1311 | }
1312 |
1313 | if (oldText !== newText && target && !hasChildren) {
1314 | target.textContent = newText;
1315 | oldChild.text = newText;
1316 | }
1317 |
1318 | oldChild.tag = newTag;
1319 |
1320 | if (target) {
1321 | runAttributeDiffing(target, oldAttrs, newAttrs);
1322 | runStyleDiffing(target, oldStyles, newStyles);
1323 | runEventDiffing(target, oldEvents, newEvents);
1324 | }
1325 | }
1326 | }
1327 |
1328 | function synchronizeRootChildrenLengthAndSourceLength(root, iterable) {
1329 | if (root.children.length > iterable.source.values.length) {
1330 | let length = root.children.length - iterable.source.values.length;
1331 |
1332 | while (length--) {
1333 | const lastElementIndex = root.children.length - 1;
1334 | const lastElement = root.children[lastElementIndex];
1335 | root.removeChild(lastElement);
1336 | }
1337 | }
1338 | }
1339 |
1340 | /**
1341 | *
1342 | *
Olá
1343 | *
Olá
1344 | *
Olá
1345 | *
1346 | *
Olá
1347 | *
1350 | *
Olá
1351 | *
Olá
1352 | *
Olá
1353 | *
1354 | *
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 
26 |
27 |
28 |
29 |
30 |