Customelements to webtypes (#681)

* (feat) generate web-types.json

* (feat) added doc ref

Co-authored-by: Matthias Guth <matthias.guth@vitagroup.ag>

package-lock.json

@@ -48,6 +48,7 @@
         "get-port": "^6.0.0",
         "globby": "^13.1.0",
         "husky": "^7.0.4",
+        "jsonata": "^1.8.6",
         "lint-staged": "^12.3.2",
         "lunr": "^2.3.9",
         "npm-check-updates": "^12.2.1",
@@ -8413,6 +8414,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonata": {
+      "version": "1.8.6",
+      "resolved": "https://artifactory.vitasystems.dev:443/artifactory/api/npm/npm/jsonata/-/jsonata-1.8.6.tgz",
+      "integrity": "sha512-ZH2TPYdNP2JecOl/HvrH47Xc+9imibEMQ4YqKy/F/FrM+2a6vfbGxeCX23dB9Fr6uvGwv+ghf1KxWB3iZk09wA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/jsonfile": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
@@ -20675,6 +20686,12 @@
         "minimist": "^1.2.5"
       }
     },
+    "jsonata": {
+      "version": "1.8.6",
+      "resolved": "https://artifactory.vitasystems.dev:443/artifactory/api/npm/npm/jsonata/-/jsonata-1.8.6.tgz",
+      "integrity": "sha512-ZH2TPYdNP2JecOl/HvrH47Xc+9imibEMQ4YqKy/F/FrM+2a6vfbGxeCX23dB9Fr6uvGwv+ghf1KxWB3iZk09wA==",
+      "dev": true
+    },
     "jsonfile": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",

package.json

@@ -8,6 +8,7 @@
   "main": "dist/shoelace.js",
   "module": "dist/shoelace.js",
   "customElements": "dist/custom-elements.json",
+  "web-types": "dist/web-types.json",
   "type": "module",
   "types": "dist/shoelace.d.ts",
   "files": [
@@ -89,6 +90,7 @@
     "get-port": "^6.0.0",
     "globby": "^13.1.0",
     "husky": "^7.0.4",
+    "jsonata": "^1.8.6",
     "lint-staged": "^12.3.2",
     "lunr": "^2.3.9",
     "npm-check-updates": "^12.2.1",

scripts/build.js

@@ -29,6 +29,7 @@ fs.mkdirSync(outdir, { recursive: true });
     execSync(`node scripts/make-search.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-react.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-vscode-data.js --outdir "${outdir}"`, { stdio: 'inherit' });
+    execSync(`node scripts/make-webtypes.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });
     if (types) {

scripts/make-webtypes.js

@@ -0,0 +1,68 @@
+//
+// This script converts the custom-elements.json to generate web-types.json
+//
+import commandLineArgs from 'command-line-args';
+import jsonata from 'jsonata';
+import fs from 'fs';
+import path from 'path';
+
+const {outdir} = commandLineArgs({name: 'outdir', type: String});
+const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.json'), 'utf8'));
+
+const jsonataExprString = `{
+  "$schema": "http://json.schemastore.org/web-types",
+  "name": package.name,
+  "version": package.version,
+  "description-markup": "markdown",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        package.name
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        modules.declarations.{
+          "name": tagName,
+          "description": description,
+          "doc-url": $join(["https://shoelace.style/components/", $substringAfter(tagName, 'sl-')]),
+          "js": {
+            "properties": [
+              members.{
+                "name": name,
+                "description": description,
+                "value": {
+                  "type": type.text
+                }
+              }
+            ],
+            "events": [
+              events.{
+                "name": name,
+                "description": description
+              }
+            ]
+          },
+          "attributes": [
+            attributes.{
+              "name": name,
+              "description": description,
+              "value": {
+                "type": type.text
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}`;
+
+
+// Run the conversion
+const expression = jsonata(jsonataExprString)
+
+console.log('Generating web types');
+fs.writeFileSync(path.join(outdir, 'web-types.json'), JSON.stringify(expression.evaluate(metadata), null, 2), 'utf8');