Add React components

Author: vividviolet

config/typescript/tsconfig.base.json

@@ -1,19 +1,18 @@
 {
   "extends": "@shopify/typescript-configs/library.json",
   "compilerOptions": {
-    "moduleResolution": "Bundler",
     "strict": true,
     "composite": true,
     "isolatedModules": true,
-    "emitDeclarationOnly": true,
+    "emitDeclarationOnly": false,
     "lib": [
       "es2015",
       "es2016",
       "es2017",
       "es2018",
       "esnext",
       "esnext.asynciterable",
-      "WebWorker"
+      "DOM"
     ]
   }
 }

package.json

@@ -7,9 +7,9 @@
     "./packages/*"
   ],
   "scripts": {
-    "build": "loom build",
-    "build-consumer": "loom build && ./scripts/build-consumer.sh",
-    "build-consumer-spin": "loom build && ./scripts/build-consumer-spin.sh",
+    "build": "yarn workspace @shopify/ui-extensions build; yarn workspace @shopify/ui-extensions-react build",
+    "build-consumer": "yarn build && ./scripts/build-consumer.sh",
+    "build-consumer-spin": "yarn build && ./scripts/build-consumer-spin.sh",
     "generate-definition": "node ./scripts/generator.js",
     "clean": "git clean -xdf ./packages; rm -rf ./build",
     "predeploy": "yarn build",
@@ -52,7 +52,9 @@
     "nodemon": "^2.0.4",
     "prettier": "^2.8.0",
     "react": ">=18.0.0",
-    "typescript": "^4.9.0"
+    "typescript": "^4.9.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vite": "^5.4.11"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

packages/ui-extensions-react/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@shopify/ui-extensions-react",
   "version": "0.0.0-unstable",
+  "scripts": {
+    "build": "vite build"
+  },
   "description": "React bindings for @shopify/ui-extensions",
   "publishConfig": {
     "access": "public",
@@ -11,53 +14,39 @@
   "main": "index.js",
   "module": "index.mjs",
   "esnext": "index.esnext",
-  "types": "./build/ts/index.d.ts",
+  "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
       "admin": [
-        "./build/ts/surfaces/admin.d.ts"
+        "./dist/surfaces/admin.d.ts"
       ],
       "checkout": [
-        "./build/ts/surfaces/checkout.d.ts"
+        "./dist/surfaces/checkout.d.ts"
       ],
       "customer-account": [
-        "./build/ts/surfaces/customer-account.d.ts"
+        "./dist/surfaces/customer-account.d.ts"
       ],
       "point-of-sale": [
-        "./build/ts/surfaces/point-of-sale.d.ts"
+        "./dist/surfaces/point-of-sale.d.ts"
       ]
     }
   },
   "exports": {
-    ".": {
-      "types": "./build/ts/index.d.ts",
-      "esnext": "./index.esnext",
-      "import": "./index.mjs",
-      "require": "./index.js"
-    },
     "./admin": {
-      "types": "./build/ts/surfaces/admin.d.ts",
-      "esnext": "./build/esnext/surfaces/admin.esnext",
-      "import": "./build/esm/surfaces/admin.mjs",
-      "require": "./build/cjs/surfaces/admin.js"
+      "types": "./dist/surfaces/admin.d.ts",
+      "default": "./dist/admin.mjs"
     },
     "./checkout": {
-      "types": "./build/ts/surfaces/checkout.d.ts",
-      "esnext": "./build/esnext/surfaces/checkout.esnext",
-      "import": "./build/esm/surfaces/checkout.mjs",
-      "require": "./build/cjs/surfaces/checkout.js"
+      "types": "./dist/surfaces/checkout.d.ts",
+      "default": "./dist/checkout.mjs"
     },
     "./customer-account": {
-      "types": "./build/ts/surfaces/customer-account.d.ts",
-      "esnext": "./build/esnext/surfaces/customer-account.esnext",
-      "import": "./build/esm/surfaces/customer-account.mjs",
-      "require": "./build/cjs/surfaces/customer-account.js"
+      "types": "./dist/surfaces/customer-account.d.ts",
+      "default": "./dist/customer-account.mjs"
     },
     "./point-of-sale": {
-      "types": "./build/ts/surfaces/point-of-sale.d.ts",
-      "esnext": "./build/esnext/surfaces/point-of-sale.esnext",
-      "import": "./build/esm/surfaces/point-of-sale.mjs",
-      "require": "./build/cjs/surfaces/point-of-sale.js"
+      "types": "./dist/surfaces/point-of-sale.d.ts",
+      "default": "./dist/point-of-sale.mjs"
     }
   },
   "dependencies": {

packages/ui-extensions-react/src/surfaces/admin.ts

@@ -1,4 +1,5 @@
 export {extend, extension} from '@shopify/ui-extensions/admin';
 
 export * from './admin/hooks';
+export * from './admin/components';
 export {render, reactExtension} from './admin/render';