diff --git a/.gitignore b/.gitignore index eddefb229..094a8d24d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,8 @@ /node_modules /dist -.FIGMA_TOKEN \ No newline at end of file +.FIGMA_TOKEN + +vue/ +react/ +elements/ \ No newline at end of file diff --git a/README.md b/README.md index 78d73c8e9..e55e1d4fd 100644 --- a/README.md +++ b/README.md @@ -21,14 +21,14 @@ To update the icons, run the following script. If it has a valid Figma access to or ```bash -pnpm run import +pnpm import ``` ### Local preview You can open a local preview of the icons. Use this to verify that the icons looks as they should. Run the following command. ```bash -pnpm run preview +pnpm dev ``` diff --git a/elements.eik.js b/elements.eik.js new file mode 100644 index 000000000..79d6147fe --- /dev/null +++ b/elements.eik.js @@ -0,0 +1,16 @@ +import * as eik from '@eik/esbuild-plugin'; +import esbuild from 'esbuild'; + +await eik.load(); + +await esbuild.build({ + plugins: [eik.plugin()], + entryPoints: ['elements/index.js'], + bundle: true, + outfile: 'dist/elements/icons.js', + format: 'esm', + sourcemap: true, + target: 'es2017', + minify: true, + external: ['lit'], +}); diff --git a/package.json b/package.json index fd47059b5..2676ccd08 100644 --- a/package.json +++ b/package.json @@ -5,21 +5,30 @@ "description": "WARP's icon set", "main": "index.js", "files": [ - "dist" + "dist", + "vue", + "react", + "elements" ], "exports": { - ".": "./index.js" + ".": "./index.js", + "./react": "./react/index.js", + "./vue": "./vue/index.js", + "./elements": "./elements/index.js", + "./elements/*": "./elements/*.js", + "./package.json": "./package.json" }, "scripts": { "import": "node ./scripts/import.js", "build": "node ./scripts/build.js", - "render": "node preview/render.js", - "dev": "vite", - "vite:build": "vite build", - "preview": "pnpm run build && vite build && vite preview" + "dev": "pnpm build && vite", + "build:react": "rimraf react && mkdir react && node ./scripts/output/react.js && node ./react.eik.js", + "build:vue": "rimraf vue && mkdir vue && node ./scripts/output/vue.js && node ./vue.eik.js", + "build:elements": "rimraf elements && mkdir elements && node ./scripts/output/elements.js && node ./elements.eik.js" }, "license": "Apache-2.0", "devDependencies": { + "@eik/esbuild-plugin": "^1.1.11", "@sindresorhus/slugify": "^2.1.0", "@warp-ds/uno": "^1.0.0", "camelcase": "^8.0.0", @@ -41,5 +50,19 @@ }, "publishConfig": { "access": "public" + }, + "eik": { + "server": "https://assets.finn.no", + "type": "package", + "files": { + "react": "./dist/react", + "vue": "./dist/vue", + "elements": "./dist/elements" + }, + "import-map": [ + "https://assets.finn.no/map/react/v2", + "https://assets.finn.no/map/vue/v1", + "https://assets.finn.no/map/custom-elements/v2" + ] } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2482a1fc8..7d21b3764 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false devDependencies: + '@eik/esbuild-plugin': + specifier: ^1.1.11 + version: 1.1.11 '@sindresorhus/slugify': specifier: ^2.1.0 version: 2.1.0 @@ -25,7 +28,7 @@ devDependencies: version: 11.1.1 glob: specifier: ^10.0.0 - version: 10.3.3 + version: 10.0.0 happy-dom: specifier: ^10.0.0 version: 10.0.0 @@ -52,7 +55,7 @@ devDependencies: version: 3.0.0 unocss: specifier: ^0.55.2 - version: 0.55.2(postcss@8.4.28)(vite@4.4.9) + version: 0.55.2(postcss@8.4.29)(vite@4.4.9) vite: specifier: ^4.4.9 version: 4.4.9 @@ -81,6 +84,31 @@ packages: resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==} dev: true + /@eik/common@3.0.1: + resolution: {integrity: sha512-h9z1jyz0ueOwNfAPnwjJk3JGCMdm/3TFqGiGi3KqLgx3fhHgKOLmZa9fqGgX0E8arCgN2YavJwHiBCsIKTqEdQ==} + dependencies: + ajv: 8.12.0 + ajv-formats: 2.1.1(ajv@8.12.0) + glob: 8.1.0 + is-glob: 4.0.3 + mime-types: 2.1.35 + node-fetch: 2.7.0 + semver: 7.5.4 + validate-npm-package-name: 4.0.0 + transitivePeerDependencies: + - encoding + dev: true + + /@eik/esbuild-plugin@1.1.11: + resolution: {integrity: sha512-sJZSw0HawDE9jx85x/lL3Xnnk4ipao96KISo8tr9tGOSOMcEciWuTS/CMfqChM6Cq3hhWKOe2usZ2HyXp9dnow==} + dependencies: + '@eik/common': 3.0.1 + esbuild-plugin-import-map: 2.1.0 + undici: 5.3.0 + transitivePeerDependencies: + - encoding + dev: true + /@esbuild/android-arm64@0.18.20: resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==} engines: {node: '>=12'} @@ -370,8 +398,8 @@ packages: resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==} dev: true - /@rollup/pluginutils@5.0.3: - resolution: {integrity: sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==} + /@rollup/pluginutils@5.0.4: + resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==} engines: {node: '>=14.0.0'} peerDependencies: rollup: ^1.20.0||^2.0.0||^3.0.0 @@ -430,7 +458,7 @@ packages: hasBin: true dependencies: '@ampproject/remapping': 2.2.1 - '@rollup/pluginutils': 5.0.3 + '@rollup/pluginutils': 5.0.4 '@unocss/config': 0.55.2 '@unocss/core': 0.55.2 '@unocss/preset-uno': 0.55.2 @@ -462,6 +490,10 @@ packages: resolution: {integrity: sha512-ZLEES8RDgWoK/vttUzl3PM2bZqL3HvhLgj8xdDa09Xw+JiTlR4c66s+hLn52oCoJTnT9lGsD2j7tTGN9ToSiTA==} dev: true + /@unocss/core@0.55.7: + resolution: {integrity: sha512-c+bWe844Xjlwc1EPwHj0+n3LpntJG7ELPbEOOxNIG+CQdcEX0l1G0rkM8+nKstJ9WJmgpf1HdJQLVMF62HXvhw==} + dev: true + /@unocss/extractor-arbitrary-variants@0.52.7: resolution: {integrity: sha512-nJ4iE7nIRpoOIQfD8S58yG4qJd6AhVPEfEOf7ksX1u8xLf71rrBIojwraRXvv7aPqNdZiWvXdh/znpA/QC5b9w==} dependencies: @@ -481,7 +513,7 @@ packages: sirv: 2.0.3 dev: true - /@unocss/postcss@0.55.2(postcss@8.4.28): + /@unocss/postcss@0.55.2(postcss@8.4.29): resolution: {integrity: sha512-HJLGINNlQ3DGL9zRGuctX+mOVW2w7o8Wj89v3/2qTcqXBDpwfn1+KlxSjU9rsEPdE4Ur3MIcVXcJC0wz4+EwEA==} engines: {node: '>=14'} peerDependencies: @@ -492,7 +524,7 @@ packages: css-tree: 2.3.1 fast-glob: 3.3.1 magic-string: 0.30.3 - postcss: 8.4.28 + postcss: 8.4.29 dev: true /@unocss/preset-attributify@0.55.2: @@ -605,7 +637,7 @@ packages: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 dependencies: '@ampproject/remapping': 2.2.1 - '@rollup/pluginutils': 5.0.3 + '@rollup/pluginutils': 5.0.4 '@unocss/config': 0.55.2 '@unocss/core': 0.55.2 '@unocss/inspector': 0.55.2 @@ -622,7 +654,7 @@ packages: /@warp-ds/uno@1.0.0: resolution: {integrity: sha512-RBt/uiUMmu333La2b0eFieJTe6p0xueCMlMkEiHhtkFYRkvQMzKnUj19AMyAkIeSx6IkbmuCvfuWQoCHnkILHA==} dependencies: - '@unocss/core': 0.55.2 + '@unocss/core': 0.55.7 '@unocss/preset-mini': 0.52.7 dev: true @@ -636,6 +668,26 @@ packages: hasBin: true dev: true + /ajv-formats@2.1.1(ajv@8.12.0): + resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==} + peerDependencies: + ajv: ^8.0.0 + peerDependenciesMeta: + ajv: + optional: true + dependencies: + ajv: 8.12.0 + dev: true + + /ajv@8.12.0: + resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==} + dependencies: + fast-deep-equal: 3.1.3 + json-schema-traverse: 1.0.0 + require-from-string: 2.0.2 + uri-js: 4.4.1 + dev: true + /ansi-regex@5.0.1: resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} engines: {node: '>=8'} @@ -661,7 +713,6 @@ packages: /anymatch@3.1.3: resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} engines: {node: '>= 8'} - requiresBuild: true dependencies: normalize-path: 3.0.0 picomatch: 2.3.1 @@ -686,7 +737,6 @@ packages: /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} - requiresBuild: true dev: true /bl@5.1.0: @@ -721,6 +771,12 @@ packages: ieee754: 1.2.1 dev: true + /builtins@5.0.1: + resolution: {integrity: sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==} + dependencies: + semver: 7.5.4 + dev: true + /cac@6.7.14: resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} engines: {node: '>=8'} @@ -1070,6 +1126,10 @@ packages: dev: true optional: true + /esbuild-plugin-import-map@2.1.0: + resolution: {integrity: sha512-rlI9H8f1saIqYEUNHxDmIMGZZFroANyD6q3Aht6aXyOq/aOdO6jp5VFF1+n3o9AUe+wAtQcn93Wv1Vuj9na0hg==} + dev: true + /esbuild-sunos-64@0.14.42: resolution: {integrity: sha512-uXV8TAZEw36DkgW8Ak3MpSJs1ofBb3Smkc/6pZ29sCAN1KzCAQzsje4sUwugf+FVicrHvlamCOlFZIXgct+iqQ==} engines: {node: '>=12'} @@ -1188,6 +1248,10 @@ packages: strip-final-newline: 2.0.0 dev: true + /fast-deep-equal@3.1.3: + resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + dev: true + /fast-glob@3.3.1: resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==} engines: {node: '>=8.6.0'} @@ -1216,7 +1280,6 @@ packages: /fill-range@7.0.1: resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} engines: {node: '>=8'} - requiresBuild: true dependencies: to-regex-range: 5.0.1 dev: true @@ -1253,6 +1316,10 @@ packages: universalify: 2.0.0 dev: true + /fs.realpath@1.0.0: + resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} + dev: true + /fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -1273,18 +1340,39 @@ packages: is-glob: 4.0.3 dev: true - /glob@10.3.3: - resolution: {integrity: sha512-92vPiMb/iqpmEgsOoIDvTjc50wf9CCCvMzsi6W0JLPeUKE8TWP1a73PgqSrqy7iAZxaSD1YdzU7QZR5LF51MJw==} + /glob@10.0.0: + resolution: {integrity: sha512-zmp9ZDC6NpDNLujV2W2n+3lH+BafIVZ4/ct+Yj3BMZTH/+bgm/eVjHzeFLwxJrrIGgjjS2eiQLlpurHsNlEAtQ==} + engines: {node: '>=16 || 14 >=14.17'} + dependencies: + fs.realpath: 1.0.0 + minimatch: 9.0.3 + minipass: 5.0.0 + path-scurry: 1.10.1 + dev: true + + /glob@10.3.4: + resolution: {integrity: sha512-6LFElP3A+i/Q8XQKEvZjkEWEOTgAIALR9AO2rwT8bgPhDd1anmqDJDZ6lLddI4ehxxxR1S5RIqKe1uapMQfYaQ==} engines: {node: '>=16 || 14 >=14.17'} hasBin: true dependencies: foreground-child: 3.1.1 - jackspeak: 2.3.0 + jackspeak: 2.3.3 minimatch: 9.0.3 minipass: 7.0.3 path-scurry: 1.10.1 dev: true + /glob@8.1.0: + resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} + engines: {node: '>=12'} + dependencies: + fs.realpath: 1.0.0 + inflight: 1.0.6 + inherits: 2.0.4 + minimatch: 5.1.6 + once: 1.4.0 + dev: true + /graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} dev: true @@ -1323,6 +1411,13 @@ packages: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} dev: true + /inflight@1.0.6: + resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} + dependencies: + once: 1.4.0 + wrappy: 1.0.2 + dev: true + /inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} dev: true @@ -1330,7 +1425,6 @@ packages: /is-binary-path@2.1.0: resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} engines: {node: '>=8'} - requiresBuild: true dependencies: binary-extensions: 2.2.0 dev: true @@ -1338,7 +1432,6 @@ packages: /is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} - requiresBuild: true dev: true /is-fullwidth-code-point@3.0.0: @@ -1349,7 +1442,6 @@ packages: /is-glob@4.0.3: resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} engines: {node: '>=0.10.0'} - requiresBuild: true dependencies: is-extglob: 2.1.1 dev: true @@ -1362,7 +1454,6 @@ packages: /is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} - requiresBuild: true dev: true /is-stream@2.0.1: @@ -1379,8 +1470,8 @@ packages: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} dev: true - /jackspeak@2.3.0: - resolution: {integrity: sha512-uKmsITSsF4rUWQHzqaRUuyAir3fZfW3f202Ee34lz/gZCi970CPZwyQXLGNgWJvvZbvFyzeyGq0+4fcG/mBKZg==} + /jackspeak@2.3.3: + resolution: {integrity: sha512-R2bUw+kVZFS/h1AZqBKrSgDmdmjApzgY0AlCPumopFiAlbUxE2gf+SCuBzQ0cP5hHmUmFYF5yw55T97Th5Kstg==} engines: {node: '>=14'} dependencies: '@isaacs/cliui': 8.0.2 @@ -1400,6 +1491,10 @@ packages: argparse: 2.0.1 dev: true + /json-schema-traverse@1.0.0: + resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==} + dev: true + /jsonc-parser@3.2.0: resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==} dev: true @@ -1437,7 +1532,7 @@ packages: resolution: {integrity: sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==} engines: {node: '>=12'} dependencies: - chalk: 5.3.0 + chalk: 5.0.1 is-unicode-supported: 1.3.0 dev: true @@ -1446,6 +1541,13 @@ packages: engines: {node: 14 || >=16.14} dev: true + /lru-cache@6.0.0: + resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} + engines: {node: '>=10'} + dependencies: + yallist: 4.0.0 + dev: true + /magic-string@0.30.3: resolution: {integrity: sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==} engines: {node: '>=12'} @@ -1478,11 +1580,30 @@ packages: picomatch: 2.3.1 dev: true + /mime-db@1.52.0: + resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} + engines: {node: '>= 0.6'} + dev: true + + /mime-types@2.1.35: + resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} + engines: {node: '>= 0.6'} + dependencies: + mime-db: 1.52.0 + dev: true + /mimic-fn@2.1.0: resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==} engines: {node: '>=6'} dev: true + /minimatch@5.1.6: + resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==} + engines: {node: '>=10'} + dependencies: + brace-expansion: 2.0.1 + dev: true + /minimatch@9.0.3: resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==} engines: {node: '>=16 || 14 >=14.17'} @@ -1490,13 +1611,18 @@ packages: brace-expansion: 2.0.1 dev: true + /minipass@5.0.0: + resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==} + engines: {node: '>=8'} + dev: true + /minipass@7.0.3: resolution: {integrity: sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==} engines: {node: '>=16 || 14 >=14.17'} dev: true - /mlly@1.4.0: - resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==} + /mlly@1.4.2: + resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==} dependencies: acorn: 8.10.0 pathe: 1.1.1 @@ -1534,6 +1660,18 @@ packages: resolution: {integrity: sha512-F5kfEj95kX8tkDhUCYdV8dg3/8Olx/94zB8+ZNthFs6Bz31UpUi8Xh40TN3thLwXgrwXry1pEg9lJ++tLWTcqA==} dev: true + /node-fetch@2.7.0: + resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==} + engines: {node: 4.x || >=6.0.0} + peerDependencies: + encoding: ^0.1.0 + peerDependenciesMeta: + encoding: + optional: true + dependencies: + whatwg-url: 5.0.0 + dev: true + /node-fetch@3.2.9: resolution: {integrity: sha512-/2lI+DBecVvVm9tDhjziTVjo2wmTsSxSk58saUYP0P/fRJ3xxtfMDY24+CKTkfm0Dlhyn3CSXNL0SoRiCZ8Rzg==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -1546,7 +1684,6 @@ packages: /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} - requiresBuild: true dev: true /npm-run-path@4.0.1: @@ -1585,6 +1722,12 @@ packages: ufo: 1.3.0 dev: true + /once@1.4.0: + resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} + dependencies: + wrappy: 1.0.2 + dev: true + /onetime@5.1.2: resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==} engines: {node: '>=6'} @@ -1636,7 +1779,7 @@ packages: engines: {node: '>=16 || 14 >=14.17'} dependencies: lru-cache: 10.0.1 - minipass: 7.0.3 + minipass: 5.0.0 dev: true /pathe@1.1.1: @@ -1660,12 +1803,12 @@ packages: resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==} dependencies: jsonc-parser: 3.2.0 - mlly: 1.4.0 + mlly: 1.4.2 pathe: 1.1.1 dev: true - /postcss@8.4.28: - resolution: {integrity: sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==} + /postcss@8.4.29: + resolution: {integrity: sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==} engines: {node: ^10 || ^12 || >=14} dependencies: nanoid: 3.3.6 @@ -1681,6 +1824,11 @@ packages: sisteransi: 1.0.5 dev: true + /punycode@2.3.0: + resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==} + engines: {node: '>=6'} + dev: true + /queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true @@ -1697,11 +1845,15 @@ packages: /readdirp@3.6.0: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} - requiresBuild: true dependencies: picomatch: 2.3.1 dev: true + /require-from-string@2.0.2: + resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==} + engines: {node: '>=0.10.0'} + dev: true + /restore-cursor@4.0.0: resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -1720,7 +1872,7 @@ packages: engines: {node: '>=14'} hasBin: true dependencies: - glob: 10.3.3 + glob: 10.3.4 dev: true /rollup@3.28.1: @@ -1745,6 +1897,14 @@ packages: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} dev: true + /semver@7.5.4: + resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==} + engines: {node: '>=10'} + hasBin: true + dependencies: + lru-cache: 6.0.0 + dev: true + /shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -1859,7 +2019,6 @@ packages: /to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} - requiresBuild: true dependencies: is-number: 7.0.0 dev: true @@ -1869,6 +2028,10 @@ packages: engines: {node: '>=6'} dev: true + /tr46@0.0.3: + resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} + dev: true + /ufo@1.3.0: resolution: {integrity: sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==} dev: true @@ -1879,7 +2042,12 @@ packages: '@antfu/utils': 0.7.6 defu: 6.1.2 jiti: 1.19.3 - mlly: 1.4.0 + mlly: 1.4.2 + dev: true + + /undici@5.3.0: + resolution: {integrity: sha512-8LxC/xmR2GCE4q1heE1sJxVnnf5S6yQ2dObvMFBBWkB8aQlaqNuWovgRFWRMB7KUdLPGZfOTTmUeeLEJYX56iQ==} + engines: {node: '>=12.18'} dev: true /universalify@2.0.0: @@ -1887,7 +2055,7 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /unocss@0.55.2(postcss@8.4.28)(vite@4.4.9): + /unocss@0.55.2(postcss@8.4.29)(vite@4.4.9): resolution: {integrity: sha512-+C8tFUFIEv40DpEhjA/Yv+RB5HZumkWiON2OlPyrbzapQ8x60F9TUwUS3pw7MlpxI6GfTCYwXKEE6DTGCm1SLA==} engines: {node: '>=14'} peerDependencies: @@ -1903,7 +2071,7 @@ packages: '@unocss/cli': 0.55.2 '@unocss/core': 0.55.2 '@unocss/extractor-arbitrary-variants': 0.55.2 - '@unocss/postcss': 0.55.2(postcss@8.4.28) + '@unocss/postcss': 0.55.2(postcss@8.4.29) '@unocss/preset-attributify': 0.55.2 '@unocss/preset-icons': 0.55.2 '@unocss/preset-mini': 0.55.2 @@ -1926,10 +2094,23 @@ packages: - supports-color dev: true + /uri-js@4.4.1: + resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + dependencies: + punycode: 2.3.0 + dev: true + /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true + /validate-npm-package-name@4.0.0: + resolution: {integrity: sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==} + engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} + dependencies: + builtins: 5.0.1 + dev: true + /vite-plugin-nunjucks@0.1.10(vite@4.4.9): resolution: {integrity: sha512-nL8UoJJPVWY0StRbmWxFHesoimadgjLM6DSs5gy0azvWc+lnJ+8vwEon8KXdtfC2ynvUzTzWdDZTP+gnsqGuAw==} peerDependencies: @@ -1970,7 +2151,7 @@ packages: optional: true dependencies: esbuild: 0.18.20 - postcss: 8.4.28 + postcss: 8.4.29 rollup: 3.28.1 optionalDependencies: fsevents: 2.3.3 @@ -1981,6 +2162,10 @@ packages: engines: {node: '>= 8'} dev: true + /webidl-conversions@3.0.1: + resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} + dev: true + /webidl-conversions@7.0.0: resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} engines: {node: '>=12'} @@ -1998,6 +2183,13 @@ packages: engines: {node: '>=12'} dev: true + /whatwg-url@5.0.0: + resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==} + dependencies: + tr46: 0.0.3 + webidl-conversions: 3.0.1 + dev: true + /which@2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} engines: {node: '>= 8'} @@ -2024,6 +2216,14 @@ packages: strip-ansi: 7.1.0 dev: true + /wrappy@1.0.2: + resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} + dev: true + + /yallist@4.0.0: + resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} + dev: true + /yocto-queue@0.1.0: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} diff --git a/react.eik.js b/react.eik.js new file mode 100644 index 000000000..bea329d01 --- /dev/null +++ b/react.eik.js @@ -0,0 +1,16 @@ +import * as eik from '@eik/esbuild-plugin'; +import esbuild from 'esbuild'; + +await eik.load(); + +await esbuild.build({ + plugins: [eik.plugin()], + entryPoints: ['react/index.js'], + bundle: true, + outfile: 'dist/react/icons.js', + format: 'esm', + sourcemap: true, + target: 'es2017', + minify: true, + external: ['react'], +}); diff --git a/scripts/build.js b/scripts/build.js index 73ba3ba3b..3f1810a2b 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -75,14 +75,14 @@ files.forEach((filePath) => { const optimizedFileSize = Buffer.byteLength(optimizedData, "utf8"); + const iconName = getIconName(filePath); const fileName = path.basename(filePath); - const iconSize = getIconSize(filePath); // Only enable when needed, this is too much garbage to be spitting at console - it hides useful messages - // console.log(`\n${iconSize}/${fileName}:`); + // console.log(`\n${IconName}/${fileName}:`); // printProfitInfo(prevFileSize, optimizedFileSize); - const outputPath = path.join(DIST_DIR, iconSize, fileName); + const outputPath = path.join(DIST_DIR, iconName, fileName); fs.outputFile(outputPath, optimizedData, "utf8"); } catch (err) { @@ -107,7 +107,7 @@ function printProfitInfo(inBytes, outBytes) { ); } -function getIconSize(filePath) { +function getIconName(filePath) { const dirname = path.dirname(filePath); const dirs = dirname.split("/"); return dirs[dirs.length - 1]; diff --git a/scripts/output/elements.js b/scripts/output/elements.js new file mode 100644 index 000000000..030310472 --- /dev/null +++ b/scripts/output/elements.js @@ -0,0 +1,35 @@ +import { mkdirSync, writeFileSync } from 'node:fs' +import { join as joinPath } from 'node:path' +import { getSVGs, getDirname } from '../util/helpers.js' +import chalk from 'chalk' + +const __dirname = getDirname(import.meta.url) +const icons = [] +const basepath = joinPath(__dirname, '../../elements/') +mkdirSync(basepath, { recursive: true }) + +getSVGs().forEach(({ svg, name, size, filename, exportName }) => { + const attrs = Array.from(svg.attrs).map(attr => attr.name + `=` + `"` + attr.value + `"`) + const className = exportName + const output = [ + `import { LitElement, html, svg } from 'lit';`, + ``, + `export class ${className} extends LitElement {`, + ` render() { return html\`${svg.html}\`; }`, + `}`, + `if (!customElements.get('w-icon-${name}${size}', ${className})) {`, + ` customElements.define('w-icon-${name}${size}', ${className});`, + `}`, + ].join("\n"); + + + const path = joinPath(basepath, filename) + writeFileSync(path, output, 'utf-8') + icons.push({ exportName, filename }) +}) +console.log(`${chalk.blue('lit')}: Wrote ${chalk.yellow(icons.length)} icon files`) + +const indexFile = icons.map(({ filename }) => `export * from './${filename}';`).join("\n"); +const indexFilename = joinPath(basepath, 'index.js') +writeFileSync(indexFilename, indexFile, 'utf-8') +console.log(`${chalk.blue('lit')}: Wrote ${chalk.yellow('index')} file`) diff --git a/scripts/output/react.js b/scripts/output/react.js new file mode 100644 index 000000000..467a2b915 --- /dev/null +++ b/scripts/output/react.js @@ -0,0 +1,26 @@ +import { mkdirSync, writeFileSync } from 'node:fs' +import { join as joinPath } from 'node:path' +import { getSVGs, getDirname } from '../util/helpers.js' +import chalk from 'chalk' + +const __dirname = getDirname(import.meta.url) +const icons = [] +const basepath = joinPath(__dirname, '../../react/') +mkdirSync(basepath, { recursive: true }) + +getSVGs().forEach(({ svg, filename, exportName }) => { + const attrs = Array.from(svg.attrs).map(attr => attr.name + `: ` + `'` + attr.value + `'`) + const output = [ + `import React from 'react';`, + `export const ${exportName} = (attrs) => React.createElement('svg', { ${attrs.join(", ")}, dangerouslySetInnerHTML: { __html: '${svg.html}' }, ...attrs, });`, + ].join("\n"); + const path = joinPath(basepath, filename) + writeFileSync(path, output, 'utf-8') + icons.push({ exportName, filename }) +}) +console.log(`${chalk.cyan('react')}: Wrote ${chalk.yellow(icons.length)} icon files`) + +const indexFile = icons.map(({ filename }) => `export * from './${filename}'`) .join("\n"); +const indexFilename = joinPath(basepath, 'index.js') +writeFileSync(indexFilename, `${indexFile}`, 'utf-8') +console.log(`${chalk.cyan('react')}: Wrote ${chalk.yellow('index')} file`) diff --git a/scripts/output/vue.js b/scripts/output/vue.js new file mode 100644 index 000000000..ce52d2368 --- /dev/null +++ b/scripts/output/vue.js @@ -0,0 +1,26 @@ +import { mkdirSync, writeFileSync } from 'node:fs' +import { join as joinPath } from 'node:path' +import { getSVGs, getDirname } from '../util/helpers.js' +import chalk from 'chalk' + +const __dirname = getDirname(import.meta.url) +const icons = [] +const basepath = joinPath(__dirname, '../../vue/') +mkdirSync(basepath, { recursive: true }) + +getSVGs().forEach(({ svg, filename, exportName }) => { + const attrs = Array.from(svg.attrs).map(attr => attr.name + `: ` + `'` + attr.value + `'`) + const output = [ + `import { h } from 'vue'`, + `export default (_, { attrs }) => h('svg', { ${attrs.join(', ')}, innerHTML: '${svg.html}', ...attrs })` + ].join('\n') + const path = joinPath(basepath, filename) + writeFileSync(path, output, 'utf-8') + icons.push({ exportName, filename }) +}) +console.log(`${chalk.green('vue')}: Wrote ${chalk.yellow(icons.length)} icon files`) + +const indexFile = icons.map(({ exportName, filename }) => `export { default as ${exportName} } from './${filename}'`).join('\n') +const indexFilename = joinPath(basepath, 'index.js') +writeFileSync(indexFilename, indexFile, 'utf-8') +console.log(`${chalk.green('vue')}: Wrote ${chalk.yellow('index')} file`) \ No newline at end of file diff --git a/scripts/util/helpers.js b/scripts/util/helpers.js index 614328c2b..dcb863359 100644 --- a/scripts/util/helpers.js +++ b/scripts/util/helpers.js @@ -1,6 +1,11 @@ import { Window } from 'happy-dom' +import { glob } from 'glob' import camelcase from 'camelcase' +import { readFileSync } from 'node:fs' +import { join, dirname } from 'node:path' +import { fileURLToPath } from 'node:url' +export const getDirname = (url) => dirname(fileURLToPath(url)) const pathRegex = /(?.*)\/icon_(?\d+).svg/ const getIconName = (path) => path?.substring(path?.lastIndexOf('/') + 1); export const getNameAndSize = (filepath) => { @@ -10,6 +15,21 @@ export const getNameAndSize = (filepath) => { const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1) export const pascalCase = str => capitalize(camelcase(str)) +const getNames = ({ name, size }) => ({ + filename: `${name}-${size}.js`, + exportName: pascalCase(`icon-${name}${size}`) +}) + + +const __dirname = getDirname(import.meta.url) +export const getSVGs = () => glob.sync(join(__dirname, '../../dist/**/*.svg')).map(f => { + const _svg = readFileSync(f, 'utf-8') + try { + const { size, name } = getNameAndSize(f) + const svg = getSVG(_svg) + return { svg, name, size, ...getNames({ name, size }) } + } catch (err) { console.error(err) } +}).filter(Boolean) export function getSVG(svg) { const el = getElement({ selector: 'svg', htmlString: svg }) diff --git a/vue.eik.js b/vue.eik.js new file mode 100644 index 000000000..3eb958532 --- /dev/null +++ b/vue.eik.js @@ -0,0 +1,16 @@ +import * as eik from '@eik/esbuild-plugin'; +import esbuild from 'esbuild'; + +await eik.load(); + +await esbuild.build({ + plugins: [eik.plugin()], + entryPoints: ['vue/index.js'], + bundle: true, + outfile: 'dist/vue/icons.js', + format: 'esm', + sourcemap: true, + target: 'es2017', + minify: true, + external: ['vue'], +}); \ No newline at end of file