npm - @lamartinecabral/freedom - Versions diffs - 1.0.0 - Mend

@lamartinecabral/freedom 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025 Lamartine Cabral
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,170 @@
+# @lamartinecabral/freedom
+- [What is it?](#what-is-it)
+- [Installation](#installation)
+- [Usage example](#usage-example)
+- [Reference](#reference)
+# What is it?
+A really small set of utilities to write `HTML` and `CSS` using only pure javascript.
+### But how?
+It uses browser native APIs under the hood and get type checking and suggestions thanks to [`typescript`](https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts).
+# Installation
+In a browser:
+```html
+<script src="https://unpkg.com/@lamartinecabral/freedom/dist/index.js"></script>
+<script>
+  const { elem, style } = freedom;
+</script>
+```
+```html
+<script type="module">
+  import "https://unpkg.com/@lamartinecabral/freedom/dist/index.js";
+  const { elem, style } = freedom;
+</script>
+```
+Using npm:
+```sh
+$ npm install @lamartinecabral/freedom
+```
+```javascript
+require("@lamartinecabral/freedom");
+const { elem, style } = freedom;
+```
+```javascript
+import "@lamartinecabral/freedom";
+const { elem, style } = freedom;
+```
+# Usage example
+The code below...
+```html
+<html>
+  <head>
+    <style>
+      #app {
+        text-align: center;
+        width: fit-content;
+        border: 1px solid;
+        padding: 1em;
+      }
+      h1 {
+        color: red;
+      }
+      * {
+        font-family: monospace;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <h1>Hello World!</h1>
+      <button onclick="count()">click me</button>
+      <p>you clicked <span id="counter">0</span> times.</p>
+      <button id="clr" onclick="reset()">reset</button>
+    </div>
+    <script>
+      let counter = +document.getElementById("counter").innerText;
+      function count() {
+        document.getElementById("counter").innerText = `${++counter}`;
+        document.getElementById("clr").disabled = false;
+      }
+      function reset() {
+        document.getElementById("counter").innerText = `${(counter = 0)}`;
+        document.getElementById("clr").disabled = true;
+      }
+    </script>
+  </body>
+</html>
+```
+... can be rewritten like this:
+```html
+<body>
+  <script src="https://unpkg.com/@lamartinecabral/freedom/dist/index.js"></script>
+  <script>
+    const { elem, style, getElem } = freedom;
+    style("#app", {
+      textAlign: "center",
+      width: "fit-content",
+      border: "1px solid",
+      padding: "1em",
+    });
+    style("h1", {
+      color: "red",
+    });
+    style("*", {
+      fontFamily: "monospace",
+    });
+    document.body.append(
+      elem("div", { id: "app" }, [
+        elem("h1", {}, ["Hello World!"]),
+        elem("button", { onclick: () => count() }, ["click me"]),
+        elem("p", {}, [
+          " you clicked ",
+          elem("span", { id: "counter" }, ["0"]),
+          " times. ",
+        ]),
+        elem("button", { id: "clr", onclick: () => reset(), disabled: true }, [
+          "reset",
+        ]),
+      ])
+    );
+    let counter = +getElem("counter").innerText;
+    function count() {
+      getElem("counter").innerText = `${++counter}`;
+      getElem("clr").disabled = false;
+    }
+    function reset() {
+      getElem("counter").innerText = `${(counter = 0)}`;
+      getElem("clr").disabled = true;
+    }
+  </script>
+</body>
+```
+# Reference
+### `elem()`
+It abstracts the [`Document.createElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement), [`Element.setAttribute`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) and [`Element.append`](https://developer.mozilla.org/en-US/docs/Web/API/Element/append) methods. It returns the element created.
+Signature:
+```typescript
+function elem<T extends keyof HTMLElementTagNameMap>(
+  tag: T,
+  attributes: Partial<HTMLElementTagNameMap[T]>,
+  children: Array<HTMLElement | string>
+): HTMLElementTagNameMap[T];
+```
+### `style()`
+It creates and returns a global [CSSRule](https://developer.mozilla.org/en-US/docs/Web/API/CSSRule) and abstracts the [`CSSStyleDeclaration.setProperty`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty).
+Signature:
+```typescript
+function style(
+  selector: string,
+  properties: Partial<CSSStyleDeclaration>
+): CSSStyleRule;
+```

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,55 @@
+type Tags = keyof HTMLElementTagNameMap;
+type Elem<T extends Tags> = HTMLElementTagNameMap[T];
+type DeepPartial<T extends object> = T extends Function | Array<unknown> ? T : {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+type PickByType<T, U> = {
+    [P in keyof T as T[P] extends U ? P : never]: T[P];
+};
+type ElemAttributes<T extends Tags> = DeepPartial<Elem<T>>;
+type ElemText = string | number;
+type ElemChildren = Array<HTMLElement | ElemText>;
+type TagObj<T extends Tags> = {
+    tag: T;
+    id?: string;
+};
+type TagLike<T extends Tags> = T | TagObj<T>;
+type Stringable = {
+    toString: () => string;
+};
+type StyleProps = Partial<PickByType<CSSStyleDeclaration, string>> & {
+    [property: string]: string;
+};
+declare function elem<T extends Tags>(tag: TagLike<T>): Elem<T>;
+declare function elem<T extends Tags>(tag: TagLike<T>, attributes: ElemAttributes<T>): Elem<T>;
+declare function elem<T extends Tags>(tag: TagLike<T>, attributes: ElemAttributes<T>, children: ElemChildren): Elem<T>;
+declare function elem<T extends Tags>(tag: TagLike<T>, children: ElemChildren): Elem<T>;
+declare function elem<T extends Tags>(tag: TagLike<T>, text: ElemText): Elem<T>;
+declare function elem<T extends Tags>(tag: TagLike<T>, attributes: ElemAttributes<T>, text: ElemText): Elem<T>;
+declare function style(selector: string | Stringable, properties: StyleProps): CSSStyleRule | null;
+declare function media(condition: string, styleRules: Record<string, StyleProps>): CSSMediaRule | null;
+declare function queryElem<T extends Tags>(selector: string, tag?: T): "main" extends T ? HTMLElement : Elem<T>;
+declare function getElem<T extends Tags>(id: string, tag?: T): "main" extends T ? HTMLElement : Elem<T>;
+declare function getChild<T extends Tags>(id: string, tag?: T): "main" extends T ? HTMLElement : Elem<T>;
+declare function getParent<T extends Tags>(id: string, tag?: T): "main" extends T ? HTMLElement : Elem<T>;
+declare const thisModule: Readonly<{
+    elem: typeof elem;
+    style: typeof style;
+    media: typeof media;
+    getElem: typeof getElem;
+    queryElem: typeof queryElem;
+    getChild: typeof getChild;
+    getParent: typeof getParent;
+    refElem: <T extends Tags>(tag: T) => {
+        (): Elem<T>;
+        id: string;
+        tag: T;
+        selector: string;
+        toString(): string;
+    };
+    version: string;
+}>;
+declare global {
+    var freedom: typeof thisModule;
+}
+export {};

package/dist/index.js ADDED Viewed

@@ -0,0 +1,274 @@
+!(function(){
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function setInlineStyle(element, style) {
+    try {
+        for (var prop in style) {
+            try {
+                var value = typeof style[prop] === "string"
+                    ? style[prop].replace("!important", "")
+                    : style[prop];
+                var important = value === style[prop] ? "" : "important";
+                if (prop in element.style && !important)
+                    element.style[prop] = value;
+                else
+                    element.style.setProperty(prop in element.style ? kebab(prop) : prop, value, important);
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+    }
+    catch (e) {
+        throw e;
+    }
+}
+function setAttribute(element, name, value) {
+    try {
+        if (name === "style")
+            setInlineStyle(element, value);
+        else if (name in element)
+            element[name] = value;
+        else
+            element.setAttribute(name, value);
+    }
+    catch (e) {
+        throw e;
+    }
+}
+function createElem(tag, attributes) {
+    if (tag === String("")) {
+        return document.createDocumentFragment();
+    }
+    else {
+        var el = document.createElement(tag);
+        for (var attr in attributes)
+            setAttribute(el, attr, attributes[attr]);
+        return el;
+    }
+}
+function appendChildren(parent, children) {
+    for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
+        var child = children_1[_i];
+        if (typeof child === "boolean" || typeof child === "function")
+            continue;
+        if (child === null || child === undefined)
+            continue;
+        if (Array.isArray(child)) {
+            appendChildren(parent, child);
+            continue;
+        }
+        try {
+            child !== "" &&
+                parent.appendChild(typeof child === "object"
+                    ? child
+                    : document.createTextNode(String(child)));
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+}
+function elemArgs(args) {
+    var _a = typeof args[0] === "string" ? [args[0], ""] : [args[0].tag, args[0].id], tag = _a[0], id = _a[1];
+    var attributes = {};
+    var children = [];
+    if (args[1]) {
+        if (typeof args[1] === "string" || typeof args[1] === "number")
+            children = [args[1]];
+        else if (Array.isArray(args[1]))
+            children = args[1];
+        else if (args[1])
+            attributes = args[1];
+    }
+    if (args.length >= 3) {
+        children = args.slice(2);
+    }
+    else {
+        if (Array.isArray(attributes.children))
+            children = attributes.children;
+    }
+    if ("children" in attributes) {
+        var _ = attributes.children, rest = __rest(attributes, ["children"]);
+        attributes = rest;
+    }
+    if (id)
+        attributes = __assign(__assign({}, attributes), { id: id });
+    return [tag, attributes, children];
+}
+function elem() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    try {
+        if (isComponent(args[0]))
+            return getComponent(args);
+        var _a = elemArgs(args), tag = _a[0], attributes = _a[1], children = _a[2];
+        var el = createElem(tag, attributes);
+        appendChildren(el, children);
+        return el;
+    }
+    catch (e) {
+        console.error(e);
+        return "";
+    }
+}
+var getStyleSheet = (function () {
+    var styleElement;
+    return function getStyleSheet() {
+        if (!styleElement) {
+            styleElement = document.createElement("style");
+            document.head.appendChild(styleElement);
+        }
+        if (!styleElement.sheet)
+            throw new Error("Unable to add style rule.");
+        return styleElement.sheet;
+    };
+})();
+function initRule(sheet, selector, content) {
+    var index = sheet.cssRules.length;
+    sheet.insertRule(selector + (content ? " { content: ".concat(content, "; }") : " {}"), index);
+    var rule = sheet.cssRules.item(index);
+    return rule;
+}
+function style(selector, properties) {
+    try {
+        var rule = initRule(getStyleSheet(), selector, properties.content);
+        setInlineStyle(rule, properties);
+        return rule;
+    }
+    catch (e) {
+        console.error(e);
+        return null;
+    }
+}
+function media(condition, styleRules) {
+    try {
+        var mediaRule = initRule(getStyleSheet(), "@media ".concat(condition));
+        try {
+            for (var selector in styleRules) {
+                var properties = styleRules[selector];
+                var rule = initRule(mediaRule, selector, properties.content);
+                setInlineStyle(rule, properties);
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return mediaRule;
+    }
+    catch (e) {
+        console.error(e);
+        return null;
+    }
+}
+function assertElement(el, tag) {
+    if (!el)
+        throw new ReferenceError("Element not found.");
+    if (tag && el.tagName.toLowerCase() !== tag)
+        throw new TypeError("tag parameter and element's tag do not match.");
+    return el;
+}
+function queryElem(selector, tag) {
+    var el = document.querySelector(selector);
+    return assertElement(el, tag);
+}
+function getElem(id, tag) {
+    var el = document.getElementById(id);
+    return assertElement(el, tag);
+}
+function getChild(id, tag) {
+    var _a;
+    var el = (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    return assertElement(el, tag);
+}
+function getParent(id, tag) {
+    var _a;
+    var el = (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.parentElement;
+    return assertElement(el, tag);
+}
+var refElem = (function () {
+    var refCount = 0;
+    return function refElem(tag) {
+        var id = "e" + (refCount++).toString(36);
+        var ref = function () {
+            return getElem(id, tag);
+        };
+        ref.id = id;
+        ref.tag = tag;
+        ref.selector = tag + "#" + id;
+        ref.toString = function () {
+            return this.selector;
+        };
+        return Object.freeze(ref);
+    };
+})();
+function isRef(value) {
+    return (Object.isFrozen(value) &&
+        "selector" in value &&
+        value.selector === String(value));
+}
+function isComponent(value) {
+    return typeof value === "function" && !isRef(value);
+}
+function getComponent(args) {
+    try {
+        // this is for jsx compatibility
+        return args[0](__assign({ children: args.slice(2) }, args[1]));
+    }
+    catch (err) {
+        console.error(err);
+        return;
+    }
+}
+function kebab(name) {
+    if (name.indexOf("-") !== -1)
+        return name;
+    return name.replace(/([A-Z])/g, function (a) {
+        return "-" + a.toLowerCase();
+    });
+}
+var thisModule = Object.freeze({
+    elem: elem,
+    style: style,
+    media: media,
+    getElem: getElem,
+    queryElem: queryElem,
+    getChild: getChild,
+    getParent: getParent,
+    refElem: refElem,
+    version: "1.0.0",
+});
+Object.defineProperty(window, "freedom", {
+    value: thisModule,
+    enumerable: true,
+});
+// this is for jsx compatibility
+"React" in window ||
+    Object.defineProperty(window, "React", {
+        value: { createElement: elem, Fragment: "" },
+        enumerable: true,
+    });
+})()

package/package.json ADDED Viewed

@@ -0,0 +1,30 @@
+{
+  "name": "@lamartinecabral/freedom",
+  "version": "1.0.0",
+  "description": "A really small set of utilities to build web apps.",
+  "repository": "github:lamartinecabral/freedom",
+  "homepage": "https://www.github.com/lamartinecabral/freedom",
+  "keywords": [
+    "web",
+    "javascript",
+    "typescript",
+    "browser",
+    "library"
+  ],
+  "author": "lamartinecabral",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist/index.js",
+    "dist/index.d.ts"
+  ],
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "start": "tsc",
+    "build": "npm install && npm start && node post-build.js",
+    "tag": "v=$(node -p \"'v'+require('./package.json').version\") && git tag $v && git push origin $v"
+  },
+  "devDependencies": {
+    "typescript": "5.8.3"
+  }
+}