perf: generate html react props from html spec

apps/builder/app/builder/features/settings-panel/props-section/props-section.stories.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
-import type { Instance, Prop, Asset } from "@webstudio-is/sdk";
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { Instance, Prop, Asset, PropMeta } from "@webstudio-is/sdk";
 import { textVariants } from "@webstudio-is/design-system";
 import { PropsSection } from "./props-section";
 import { usePropsLogic } from "./use-props-logic";

apps/builder/app/builder/features/settings-panel/props-section/use-props-logic.ts

@@ -1,8 +1,7 @@
 import { useState } from "react";
 import { nanoid } from "nanoid";
-import type { Instance, Prop } from "@webstudio-is/sdk";
+import type { Instance, Prop, PropMeta } from "@webstudio-is/sdk";
 import {
-  type PropMeta,
   type WsComponentPropsMeta,
   showAttribute,
 } from "@webstudio-is/react-sdk";

apps/builder/app/builder/features/settings-panel/shared.tsx

@@ -6,8 +6,7 @@ import {
   useEffect,
 } from "react";
 import equal from "fast-deep-equal";
-import type { PropMeta } from "@webstudio-is/react-sdk";
-import type { Prop, Asset } from "@webstudio-is/sdk";
+import type { Prop, Asset, PropMeta } from "@webstudio-is/sdk";
 import { SubtractIcon } from "@webstudio-is/icons";
 import {
   SmallIconButton,

packages/generate-arg-types/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@webstudio-is/html-data": "workspace:*",
-    "@webstudio-is/react-sdk": "workspace:*",
+    "@webstudio-is/sdk": "workspace:*",
     "fast-glob": "^3.2.12",
     "react-docgen-typescript": "^2.2.2",
     "zod": "^3.21.4"

packages/generate-arg-types/src/arg-types.ts

@@ -1,5 +1,5 @@
 import type { PropItem } from "react-docgen-typescript";
-import { PropMeta } from "@webstudio-is/react-sdk";
+import { PropMeta } from "@webstudio-is/sdk";
 
 export type FilterPredicate = (prop: PropItem) => boolean;
 

packages/generate-arg-types/src/cli.ts

@@ -101,7 +101,7 @@ type CustomDescriptionsType = {
       continue;
     }
 
-    let fileContent = `import type { PropMeta } from "@webstudio-is/react-sdk";\n`;
+    let fileContent = `import type { PropMeta } from "@webstudio-is/sdk";\n`;
 
     if (componentDocs.length === 1) {
       const argTypes = propsToArgTypes(

packages/html-data/package.json

@@ -5,17 +5,26 @@
   "author": "Webstudio <[email protected]>",
   "homepage": "https://webstudio.is",
   "type": "module",
+  "bin": {
+    "generate-html-props-meta": "./src/generate-html-props-meta.ts"
+  },
   "scripts": {
     "typecheck": "tsc",
     "checks": "pnpm typecheck",
     "dev": "pnpm build --watch",
     "build": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib",
+    "build:attributes": "tsx ./src/find-html-attributes.ts && prettier --write src/__generated__/html-attributes.ts",
     "dts": "tsc --project tsconfig.dts.json"
   },
+  "dependencies": {
+    "@webstudio-is/sdk": "workspace:*",
+    "html-tags": "^3.3.1",
+    "parse5": "^7.1.2"
+  },
   "devDependencies": {
+    "@types/node": "^18.11.18",
     "@webstudio-is/tsconfig": "workspace:*"
   },
-  "peerDependencies": {},
   "exports": {
     "webstudio": "./src/index.ts",
     "types": "./lib/types/index.d.ts",
@@ -27,6 +36,5 @@
   ],
   "license": "AGPL-3.0-or-later",
   "private": true,
-  "sideEffects": false,
-  "dependencies": {}
+  "sideEffects": false
 }