chore: get next and vue examples working again

examples/next-ts/next.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  experimental: {
+    externalDir: true,
+  },
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.m?js$/,
+      type: "javascript/auto",
+      resolve: {
+        fullySpecified: false,
+      },
+    })
+    return config
+  },
+}

examples/next-ts/tsconfig.json

@@ -21,5 +21,5 @@
     "incremental": true
   },
   "exclude": ["node_modules"],
-  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts"]
+  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js"]
 }

examples/vue-ts/src/hooks/use-controls.tsx

@@ -75,6 +75,7 @@ export function useControls<T extends ControlRecord>(config: T) {
                       type="checkbox"
                       checked={state.value[key] as boolean}
                       onInput={(e) => {
+                        //@ts-expect-error
                         state.value[key] = e.currentTarget.checked
                       }}
                     />
@@ -90,10 +91,10 @@ export function useControls<T extends ControlRecord>(config: T) {
                       type="text"
                       placeholder={placeholder}
                       value={state.value[key] as string}
-                      //@ts-expect-error
-                      onKeydown={(e) => {
-                        if (e.key === "Enter") {
-                          state.value[key] = (e.target as HTMLInputElement).value
+                      onKeydown={(event) => {
+                        if (event.key === "Enter") {
+                          //@ts-expect-error
+                          state.value[key] = (event.target as HTMLInputElement).value
                         }
                       }}
                     />
@@ -110,11 +111,12 @@ export function useControls<T extends ControlRecord>(config: T) {
                       id={label}
                       value={state.value[key] as string}
                       onChange={(e) => {
+                        //@ts-expect-error
                         state.value[key] = (e.target as HTMLSelectElement).value
                       }}
                     >
                       <option>-----</option>
-                      {options.map((option) => (
+                      {options.map((option: any) => (
                         <option key={option} value={option}>
                           {option}
                         </option>
@@ -137,6 +139,7 @@ export function useControls<T extends ControlRecord>(config: T) {
                       value={state.value[key] as number}
                       onKeydown={(e) => {
                         if (e.key === "Enter") {
+                          //@ts-expect-error
                           state.value[key] = (e.target as HTMLInputElement).valueAsNumber
                         }
                       }}

examples/vue-ts/src/hooks/use-id.ts

@@ -1,38 +1,3 @@
-/**
- * Credit: https://github.com/reach/reach-ui/blob/develop/packages/auto-id/src/index.tsx
- *
- * Why does this hook exist?
- *   1. Accessibiliy APIs rely heavily on element IDs
- *   2. Requiring developers to put IDs on every Chakra component
- *      is cumbersome and error-prone.
- *   3. With a components model, we can generate IDs for them!
- *
- * Solutions to ID problem:
- * 1. Generate random IDs
- *    We did this before in prior projects
- *    Since then, we've learned some things about performance for
- *    components especially with SSR.
- *
- *    This may not be a good idea because during server rendering
- *    the IDs will be statically generated, and during client-side hydration,
- *    the IDs may not match, when booting up the Vue App. Vue will then
- *    go ahead and recreate the entire application.
- *
- * 2. Don't server render IDs. Instead patch on client `onMounted`
- *    In this approach, generated ID is an empty string on the first render.
- *    This way the client and server possess the same ID.
- *
- *    When the component is finally mounted, we patch the ID.
- *    This may cause a re-render on the client, but it shouldn't be a
- *    big problem, because:
- *
- *        1. Components using `useId` composable are small
- *        2. With solution 1, it would cause a re-render anyway.
- *        3. This patch only runs once. (Only when the `onMounted` life
- *           -cycle hook is called.)
- *
- */
-
 import { computed, onBeforeMount, onMounted, ref } from "vue"
 
 let serverHandoffComplete = false

packages/utilities/dom/src/query.ts

@@ -24,7 +24,7 @@ export function contains(parent: Node | undefined, child: Node) {
 }
 
 export function isHTMLElement(v: any): v is HTMLElement {
-  return typeof v === "object" && v.nodeType === Node.ELEMENT_NODE && typeof v.nodeName === "string"
+  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string"
 }
 
 export const isDisabled = (el: HTMLElement | null): boolean => {

scripts/build.ts

@@ -59,7 +59,7 @@ function buildPackage(dir: string, pkg: Record<string, any>, opts: BuildOptions)
     minify: true,
     bundle: true,
     sourcemap: true,
-    target: "es2020",
+    target: "es6",
     absWorkingDir: dir,
     entryPoints: ["src/index.ts"],
     external: Object.keys(pkg.dependencies ?? {}).concat(Object.keys(pkg.peerDependencies ?? {})),