feat: add dom generator

README.md

@@ -8,7 +8,7 @@ IconFont Componentized is a series of tools for converting IconFont into compone
 
 ### Feature
 
--   Support generate for `React`/`Vue`/`SVG`/`WebComponent` and more...
+-   Support generate for `React`/`Vue`/`SVG`/`WebComponent`/`DOM` and more...
 
 #### Usage
 

packages/iconfont-componentized-gen-dom/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @axetroy/iconfont-componentized-gen-svg
+
+## 1.0.6
+
+### Patch Changes
+
+-   82d173a: update version
+-   Updated dependencies [82d173a]
+    -   @axetroy/iconfont-componentized-parser@1.0.6
+    -   @axetroy/iconfont-componentized-share@1.0.6
+
+## 1.0.5
+
+### Patch Changes
+
+-   55fcd0a: update
+-   Updated dependencies [55fcd0a]
+    -   @axetroy/iconfont-componentized-parser@1.0.5
+    -   @axetroy/iconfont-componentized-share@1.0.5

packages/iconfont-componentized-gen-dom/LICENSE

@@ -0,0 +1,46 @@
+Copyright (c) 2023 Axetroy
+
+Anti 996 License Version 1.0 (Draft)
+
+Permission is hereby granted to any individual or legal entity
+obtaining a copy of this licensed work (including the source code,
+documentation and/or related items, hereinafter collectively referred
+to as the "licensed work"), free of charge, to deal with the licensed
+work for any purpose, including without limitation, the rights to use,
+reproduce, modify, prepare derivative works of, distribute, publish 
+and sublicense the licensed work, subject to the following conditions:
+
+1. The individual or the legal entity must conspicuously display,
+without modification, this License and the notice on each redistributed 
+or derivative copy of the Licensed Work.
+
+2. The individual or the legal entity must strictly comply with all
+applicable laws, regulations, rules and standards of the jurisdiction
+relating to labor and employment where the individual is physically
+located or where the individual was born or naturalized; or where the
+legal entity is registered or is operating (whichever is stricter). In
+case that the jurisdiction has no such laws, regulations, rules and
+standards or its laws, regulations, rules and standards are
+unenforceable, the individual or the legal entity are required to
+comply with Core International Labor Standards.
+
+3. The individual or the legal entity shall not induce or force its
+employee(s), whether full-time or part-time, or its independent
+contractor(s), in any methods, to agree in oral or written form, to
+directly or indirectly restrict, weaken or relinquish his or her
+rights or remedies under such laws, regulations, rules and standards
+relating to labor and employment as mentioned above, no matter whether
+such written or oral agreement are enforceable under the laws of the
+said jurisdiction, nor shall such individual or the legal entity
+limit, in any methods, the rights of its employee(s) or independent
+contractor(s) from reporting or complaining to the copyright holder or
+relevant authorities monitoring the compliance of the license about
+its violation(s) of the said license.
+
+THE LICENSED WORK 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 COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN ANY WAY CONNECTION WITH THE
+LICENSED WORK OR THE USE OR OTHER DEALINGS IN THE LICENSED WORK.

packages/iconfont-componentized-gen-dom/__tests__/index.spec.js

@@ -0,0 +1,15 @@
+import { parseFromURL } from "@axetroy/iconfont-componentized-parser";
+import DOMComponentGenerator from "../src/index";
+import path from "path";
+
+describe("generate svg", () => {
+    it("generate svg 1", async () => {
+        const nodes = await parseFromURL("https://at.alicdn.com/t/font_caopq7l9o8t1emi.js");
+
+        const gen = new DOMComponentGenerator();
+
+        const components = gen.generates(nodes);
+
+        gen.write(components, path.join(__dirname, "output.spec.1"));
+    });
+});

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/IconFontAnonymousIconfont.d.ts

@@ -0,0 +1,5 @@
+// generate by iconfont-componentized
+
+declare const IconFontAnonymousIconfont: () => SVGElement;
+
+export default IconFontAnonymousIconfont;

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/IconFontAnonymousIconfont.js

@@ -0,0 +1,13 @@
+// generate by iconfont-componentized
+
+export default function IconFontAnonymousIconfont() {
+    var ele0 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    ele0.setAttribute("viewBox", "0 0 1024 1024");
+    ele0.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+        var ele1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        ele1.setAttribute("d", "M512.017908 126.754892c-210.718189 0-381.527436 172.019819-381.527436 384.221802s170.809247 384.221802 381.527436 384.221802 381.543809-172.019819 381.543809-384.221802S722.736097 126.754892 512.017908 126.754892zM702.799022 522.063193c0 16.338107-13.149485 29.573549-29.352515 29.573549L350.606705 551.636742c-16.202007 0-29.335119-13.235442-29.335119-29.573549l0-29.53978c0-16.33913 13.132088-29.573549 29.335119-29.573549l322.839803 0c16.20303 0 29.352515 13.235442 29.352515 29.573549L702.799022 522.063193z");
+        ele0.appendChild(ele1);
+
+    return ele0;
+}

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/IconFontBriefcase.d.ts

@@ -0,0 +1,5 @@
+// generate by iconfont-componentized
+
+declare const IconFontBriefcase: () => SVGElement;
+
+export default IconFontBriefcase;

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/IconFontBriefcase.js

@@ -0,0 +1,13 @@
+// generate by iconfont-componentized
+
+export default function IconFontBriefcase() {
+    var ele0 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    ele0.setAttribute("viewBox", "0 0 1024 1024");
+    ele0.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+        var ele1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        ele1.setAttribute("d", "M421.647059 783.058824l0-90.352941 60.235294 0 0 30.117647 60.235294 0 0-30.117647 60.235294 0 0 90.352941-180.705882 0zM1024 662.588235l-60.235294 0 0 361.411765-903.529412 0 0-361.411765-60.235294 0 0-481.882353 217.810824 0c56.500706-110.230588 168.96-180.705882 294.189176-180.705882s237.748706 70.535529 294.189176 180.705882l217.810824 0 0 481.882353zM287.262118 180.705882l449.596235 0c-49.694118-74.270118-133.12-120.470588-224.798118-120.470588s-175.104 46.260706-224.798118 120.470588zM903.529412 662.588235l-783.058824 0 0 301.176471 783.058824 0 0-301.176471zM963.764706 240.941176l-903.529412 0 0 361.411765 903.529412 0 0-361.411765z");
+        ele0.appendChild(ele1);
+
+    return ele0;
+}

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/IconFontCanjuYongcan.d.ts

@@ -0,0 +1,5 @@
+// generate by iconfont-componentized
+
+declare const IconFontCanjuYongcan: () => SVGElement;
+
+export default IconFontCanjuYongcan;

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/IconFontCanjuYongcan.js

@@ -0,0 +1,13 @@
+// generate by iconfont-componentized
+
+export default function IconFontCanjuYongcan() {
+    var ele0 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    ele0.setAttribute("viewBox", "0 0 1024 1024");
+    ele0.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+        var ele1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        ele1.setAttribute("d", "M351.747011 282.675051h61.691996l14.161999-262.956982h46.519997V216.940055c0 35.158998 3.723 77.312995-5.056 105.179993-12.974999 41.190997-52.839996 78.375995-95.067994 90.010994v577.48696c-36.477998 28.612998-54.209996 26.512998-91.020993 0v-577.48996L247.580018 397.970043c-21.739999-9.391999-43.010997-22.903998-54.615996-42.477997-16.347999-27.569998-14.154999-72.153995-14.154999-116.304992V19.722069h44.493997l21.239998 262.952982h52.593997l7.075999-269.022982 42.477997 1.013 5.056 268.009982zM597.508994 1.51707c18.516999-0.226 119.170992-4.343 126.416992 2.023 22.369998 19.497999 34.131998 53.486996 49.556996 79.896994 30.979998 53.039996 49.999997 116.930992 64.724996 186.089988l6.069999 61.690995 1.013 65.738996c-5 29.922998-9.012999 59.611996-13.148999 86.974994h-109.229992v540.064963H597.509994V1.51407z");
+        ele0.appendChild(ele1);
+
+    return ele0;
+}

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/IconFontJia.d.ts

@@ -0,0 +1,5 @@
+// generate by iconfont-componentized
+
+declare const IconFontJia: () => SVGElement;
+
+export default IconFontJia;

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/IconFontJia.js

@@ -0,0 +1,13 @@
+// generate by iconfont-componentized
+
+export default function IconFontJia() {
+    var ele0 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    ele0.setAttribute("viewBox", "0 0 1024 1024");
+    ele0.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+        var ele1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        ele1.setAttribute("d", "M514.048 62.464q93.184 0 175.616 35.328t143.872 96.768 96.768 143.872 35.328 175.616q0 94.208-35.328 176.128t-96.768 143.36-143.872 96.768-175.616 35.328q-94.208 0-176.64-35.328t-143.872-96.768-96.768-143.36-35.328-176.128q0-93.184 35.328-175.616t96.768-143.872 143.872-96.768 176.64-35.328zM772.096 576.512q26.624 0 45.056-18.944t18.432-45.568-18.432-45.056-45.056-18.432l-192.512 0 0-192.512q0-26.624-18.944-45.568t-45.568-18.944-45.056 18.944-18.432 45.568l0 192.512-192.512 0q-26.624 0-45.056 18.432t-18.432 45.056 18.432 45.568 45.056 18.944l192.512 0 0 191.488q0 26.624 18.432 45.568t45.056 18.944 45.568-18.944 18.944-45.568l0-191.488 192.512 0z");
+        ele0.appendChild(ele1);
+
+    return ele0;
+}

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/IconFontJiesuan.d.ts

@@ -0,0 +1,5 @@
+// generate by iconfont-componentized
+
+declare const IconFontJiesuan: () => SVGElement;
+
+export default IconFontJiesuan;

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/IconFontJiesuan.js

@@ -0,0 +1,22 @@
+// generate by iconfont-componentized
+
+export default function IconFontJiesuan() {
+    var ele0 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    ele0.setAttribute("viewBox", "0 0 1024 1024");
+    ele0.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+        var ele1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        ele1.setAttribute("d", "M383 873.4c-28.8 0-52.4-23.6-52.4-52.4 0-28.8 23.6-52.4 52.4-52.4 29 0 52.4 23.6 52.4 52.4C435.4 850 411.8 873.4 383 873.4L383 873.4zM383 873.4");
+        ele0.appendChild(ele1);
+        var ele2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        ele2.setAttribute("d", "M743.6 873.4c-29 0-52.4-23.6-52.4-52.4 0-28.8 23.6-52.4 52.4-52.4 29 0 52.4 23.6 52.4 52.4C796 850 772.4 873.4 743.6 873.4L743.6 873.4zM743.6 873.4");
+        ele0.appendChild(ele2);
+        var ele3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        ele3.setAttribute("d", "M376.2 744.6c-37.6 0-70.6-29.6-75.2-67.6l-43.6-307.4-24.8-144c-1.4-11.6-12.2-22-23.2-22L176.4 203.6c-14.6 0-26.6-12-26.6-26.6 0-14.6 12-26.6 26.6-26.6l32.8 0c38 0 71.4 29.6 76 67.4l24.8 143.4L354 670.2c1.4 11.2 11.8 21.2 22.2 21.2l418.4 0c14.6 0 26.6 12 26.6 26.6 0 14.6-12 26.6-26.6 26.6L376.2 744.6 376.2 744.6zM376.2 744.6");
+        ele0.appendChild(ele3);
+        var ele4 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        ele4.setAttribute("d", "M408.4 641.6c-13.8 0-25.6-10.8-26.6-24.6-0.6-7 1.8-14 6.4-19.4 4.6-5.4 11-8.6 18.2-9.2l349.6-25.8c12 0 22.6-9.2 24-20.8l40.6-232c1-8.8-1.4-18-6.2-23.4-3.2-3.6-7-5.4-11.6-5.4l-446 0c-14.8 0-26.6-12-26.6-26.6 0-14.6 12-26.6 26.6-26.6l446 0c20 0 38.2 8.2 51.6 23.4 15.2 17.2 22.2 41.4 19.2 66.4l-40.6 232c-2.2 18-11.2 34.6-25 47-14 12.4-31.6 19.4-49.8 19.4l-347.6 25.6L408.4 641.6 408.4 641.6zM408.4 641.6");
+        ele0.appendChild(ele4);
+
+    return ele0;
+}

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/index.d.ts

@@ -0,0 +1,23 @@
+// generate by iconfont-componentized
+
+export type IconFontName = 'jia' | 'briefcase' | 'anonymous-iconfont' | 'jiesuan' | 'canju-yongcan';
+
+import IconFontJia from './IconFontJia';
+import IconFontBriefcase from './IconFontBriefcase';
+import IconFontAnonymousIconfont from './IconFontAnonymousIconfont';
+import IconFontJiesuan from './IconFontJiesuan';
+import IconFontCanjuYongcan from './IconFontCanjuYongcan';
+
+export { IconFontJia };
+export { IconFontBriefcase };
+export { IconFontAnonymousIconfont };
+export { IconFontJiesuan };
+export { IconFontCanjuYongcan };
+
+interface IconFontProps {
+    name: IconFontName
+}
+
+declare var IconFont: (props: IconFontProps) => SVGElement;
+
+export default IconFont;

packages/iconfont-componentized-gen-dom/__tests__/output.spec.1/index.js

@@ -0,0 +1,27 @@
+// generate by iconfont-componentized
+
+import IconFontJia from "./IconFontJia";
+import IconFontBriefcase from "./IconFontBriefcase";
+import IconFontAnonymousIconfont from "./IconFontAnonymousIconfont";
+import IconFontJiesuan from "./IconFontJiesuan";
+import IconFontCanjuYongcan from "./IconFontCanjuYongcan";
+
+export { IconFontJia };
+export { IconFontBriefcase };
+export { IconFontAnonymousIconfont };
+export { IconFontJiesuan };
+export { IconFontCanjuYongcan };
+
+export default function IconFont({ name } = {}) {
+    switch (name) {
+        case 'jia': return IconFontJia();
+        case 'briefcase': return IconFontBriefcase();
+        case 'anonymous-iconfont': return IconFontAnonymousIconfont();
+        case 'jiesuan': return IconFontJiesuan();
+        case 'canju-yongcan': return IconFontCanjuYongcan();
+        default:
+            var defaultIcon = document.createElement("i");
+            defaultIcon.setAttribute("style", "display: none");
+            return defaultIcon;
+    }
+}

packages/iconfont-componentized-gen-dom/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    presets: [
+        [
+            "@babel/preset-env",
+            {
+                targets: {
+                    node: "current",
+                },
+            },
+        ],
+    ],
+};

packages/iconfont-componentized-gen-dom/demo/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+        <style>
+            svg {
+                width: 20px;
+                height: 20px;
+            }
+        </style>
+    </head>
+    <body>
+        <script type="module" src="index.js"></script>
+    </body>
+</html>

packages/iconfont-componentized-gen-dom/demo/index.js

@@ -0,0 +1,18 @@
+import IconFontAnonymousIconfont from "../__tests__/output.spec.1/IconFontAnonymousIconfont.js";
+import IconFontBriefcase from "../__tests__/output.spec.1/IconFontBriefcase.js";
+import IconFontCanjuYongcan from "../__tests__/output.spec.1/IconFontCanjuYongcan.js";
+import IconFontJia from "../__tests__/output.spec.1/IconFontJia.js";
+import IconFontJiesuan from "../__tests__/output.spec.1/IconFontJiesuan.js";
+import IconFont from "../__tests__/output.spec.1/index.js";
+
+document.body.appendChild(IconFontAnonymousIconfont());
+document.body.appendChild(IconFontBriefcase());
+document.body.appendChild(IconFontCanjuYongcan());
+document.body.appendChild(IconFontJia());
+document.body.appendChild(IconFontJiesuan());
+
+document.body.appendChild(IconFont({ name: "anonymous-iconfont" }));
+document.body.appendChild(IconFont({ name: "briefcase" }));
+document.body.appendChild(IconFont({ name: "canju-yongcan" }));
+document.body.appendChild(IconFont({ name: "jia" }));
+document.body.appendChild(IconFont({ name: "jiesuan" }));

packages/iconfont-componentized-gen-dom/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    verbose: true,
+    transform: {
+        "^.+\\.js$": "babel-jest",
+        "^.+\\.tsx?$": "ts-jest",
+    },
+    testPathIgnorePatterns: ["/node_modules/", "/output.spec.1/", "/dist/"],
+};

packages/iconfont-componentized-gen-dom/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@axetroy/iconfont-componentized-gen-dom",
+    "version": "1.0.6",
+    "main": "dist/index.js",
+    "license": "ANTI-996",
+    "files": [
+        "dist",
+        "README.md",
+        "CHANGELOG.md",
+        "LICENSE"
+    ],
+    "scripts": {
+        "test": "jest",
+        "test:ci": "jest --ci --silent --coverage false",
+        "dev": "tsc -w",
+        "build": "tsc",
+        "serve": "vite serve"
+    },
+    "devDependencies": {
+        "vite": "^4.4.8"
+    },
+    "dependencies": {
+        "@axetroy/iconfont-componentized-parser": "workspace:*",
+        "@axetroy/iconfont-componentized-share": "workspace:*",
+        "camelcase": "^6.0.0"
+    }
+}