Merge pull request uswds#228 from uswds/eg/224-framework-specific-guidance

Web components: Enhance framework integration and documentation

Author: annepetersen

.prettierignore

@@ -3,3 +3,4 @@ build
 dist
 .changeset
 *.d.ts
+CHANGELOG.md

config/custom-elements-manifest.config.js

@@ -1,4 +1,36 @@
+import { customElementReactWrapperPlugin } from "custom-element-react-wrappers";
+import { customElementSolidJsPlugin } from "custom-element-solidjs-integration";
+import { customElementJsxPlugin } from "custom-element-jsx-integration";
+import { customElementVuejsPlugin } from "custom-element-vuejs-integration";
+import { customElementSveltePlugin } from "custom-element-svelte-integration";
+
+const defaultOptions = {
+  outdir: "./dist/types",
+  modulePath: (_, tagName) => `../dist/components/${tagName}.js`,
+};
+
 export default {
+  plugins: [
+    customElementReactWrapperPlugin({
+      outdir: "./dist/components/frameworks/react",
+      modulePath: (_, tagName) => `../../${tagName}.js`,
+    }),
+    customElementSolidJsPlugin({
+      ...defaultOptions,
+      fileName: "custom-element-solidjs.d.ts",
+    }),
+    customElementJsxPlugin({
+      ...defaultOptions,
+    }),
+    customElementVuejsPlugin({
+      ...defaultOptions,
+      fileName: "custom-element-vuejs.d.ts",
+    }),
+    customElementSveltePlugin({
+      ...defaultOptions,
+      fileName: "custom-element-svelte.d.ts",
+    }),
+  ],
   globs: ["./src/components/**/*.{js,ts}"],
   exclude: [
     "./src/components/**/*.spec.{js,ts}",

custom-elements.json

@@ -192,15 +192,17 @@
               "description": "The element's language.",
               "name": "lang",
               "default": "\"en\"",
-              "fieldName": "lang"
+              "fieldName": "lang",
+              "propName": "lang"
             },
             {
               "type": {
                 "text": "string"
               },
               "description": "The custom aria label users can override.",
               "name": "label",
-              "fieldName": "label"
+              "fieldName": "label",
+              "propName": "label"
             },
             {
               "type": {
@@ -209,15 +211,17 @@
               "description": "The top level domain for the site.",
               "name": "tld",
               "default": "\"gov\"",
-              "fieldName": "tld"
+              "fieldName": "tld",
+              "propName": "tld"
             },
             {
               "name": "isOpen",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "isOpen"
+              "fieldName": "isOpen",
+              "propName": "isopen"
             }
           ],
           "superclass": {
@@ -326,7 +330,8 @@
               },
               "description": "The url for the link",
               "name": "href",
-              "fieldName": "href"
+              "fieldName": "href",
+              "propName": "href"
             }
           ],
           "superclass": {

examples/with-astro/.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

examples/with-astro/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

examples/with-astro/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

examples/with-astro/README.md

@@ -0,0 +1,3 @@
+# Astro
+
+This is a bare-bones example to demonstrate how to use USWDS Elements in an Astro project.

examples/with-astro/astro.config.mjs

@@ -0,0 +1,5 @@
+// @ts-check
+import { defineConfig } from "astro/config";
+
+// https://astro.build/config
+export default defineConfig({});

examples/with-astro/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "with-astro",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@uswds/elements": "1.0.0-alpha.4",
+    "astro": "^5.16.0"
+  }
+}