Progress with cra

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   plugins: ['unused-imports'],
   extends: [],
   rules: {
-    'unused-imports/no-unused-imports-ts': 'warn',
+    'unused-imports/no-unused-imports': 'warn',
     'no-restricted-imports': [
       'error',
       {
@@ -44,7 +44,12 @@ module.exports = {
       },
     },
     {
+      plugins: ['react'],
       files: ['*.mjs', '*.js'],
+      rules: {
+        'react/jsx-uses-react': 'error',
+        'react/jsx-uses-vars': 'error',
+      },
       parser: 'espree',
       parserOptions: {
         sourceType: 'module',

examples/r3f-cra/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "installConfig": {
-    "hoistingLimits": "dependencies"
+    "hoistingLimits": "workspaces"
   },
   "dependencies": {
     "@react-three/drei": "^7.2.2",

examples/r3f-cra/src/App.js

@@ -1,8 +1,10 @@
 import {getProject} from '@theatre/core'
 import * as THREE from 'three'
 import {useState, useEffect, useRef} from 'react'
-import {useFrame} from '@react-three/fiber'
+import {useFrame, Canvas} from '@react-three/fiber'
-import {softShadows} from '@react-three/drei'
+import {Shadow, softShadows} from '@react-three/drei'
+import React from 'react'
+import {editable as e, Wrapper} from '@theatre/plugin-r3f'
 
 // Soft shadows are expensive, comment and refresh when it's too slow
 softShadows()

examples/r3f-cra/src/index.js

@@ -3,6 +3,8 @@ import './index.css'
 import reportWebVitals from './reportWebVitals'
 import '@theatre/studio'
 import {getProject} from '@theatre/core'
+import React from 'react'
+import App from './App'
 
 ReactDOM.render(
   <React.StrictMode>

examples/r3f-cra/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

examples/r3f-cra/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "checkJs": true,
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": [
+    "src/**/*.js"
+  ]
+}

package.json

@@ -29,14 +29,15 @@
     "@babel/preset-env": "^7.14.4",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@typescript-eslint/eslint-plugin": "^4.26.0",
+    "@typescript-eslint/eslint-plugin": "^4.29.0",
-    "@typescript-eslint/parser": "^4.26.0",
+    "@typescript-eslint/parser": "^4.29.0",
     "esbuild": "^0.12.15",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^7.27.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-unused-imports": "^1.1.1",
+    "eslint-plugin-unused-imports": "^1.1.2",
     "husky": "^6.0.0",
     "jest": "^27.0.3",
     "lerna": "^4.0.0",

packages/dataverse-react/package.json

@@ -12,7 +12,7 @@
     "url": "https://github.com/AriaMinaei/theatre",
     "directory": "packages/dataverse-react"
   },
-  "main": "dist/index.cjs",
+  "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*"
@@ -37,12 +37,12 @@
     "typescript": "^4.3.2"
   },
   "dependencies": {
+    "@theatre/dataverse": "workspace:*",
     "lodash-es": "^4.17.21",
     "queue-microtask": "^1.2.3"
   },
   "peerDependencies": {
-    "@theatre/dataverse": "*",
+    "raect-dom": "*",
-    "raect-dom": "17.0.2",
+    "react": "*"
-    "react": "17.0.2"
   }
 }

packages/dataverse/package.json

@@ -12,7 +12,7 @@
     "url": "https://github.com/AriaMinaei/theatre",
     "directory": "packages/dataverse"
   },
-  "main": "dist/index.cjs",
+  "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*"

packages/playground/src/index.tsx

@@ -1 +1 @@
-import './space-exploration'
+import './r3f'

packages/plugin-r3f/devEnv/build.ts

@@ -44,7 +44,7 @@ function createBundles(watch: boolean) {
   build({
     ...esbuildConfig,
     define: {...definedGlobals, 'process.env.NODE_ENV': '"production"'},
-    outfile: path.join(pathToPackage, 'dist/index.production.cjs'),
+    outfile: path.join(pathToPackage, 'dist/index.production.js'),
     format: 'cjs',
     treeShaking: true,
   })
@@ -52,16 +52,16 @@ function createBundles(watch: boolean) {
   build({
     ...esbuildConfig,
     define: {...definedGlobals, 'process.env.NODE_ENV': '"development"'},
-    outfile: path.join(pathToPackage, 'dist/index.development.cjs'),
+    outfile: path.join(pathToPackage, 'dist/index.development.js'),
     format: 'cjs',
   })
 
   writeFileSync(
-    path.join(pathToPackage, 'dist/index.cjs'),
+    path.join(pathToPackage, 'dist/index.js'),
     `module.exports =
   process.env.NODE_ENV === "production"
-    ? require("./index.production.cjs")
+    ? require("./index.production.js")
-    : require("./index.development.cjs")`,
+    : require("./index.development.js")`,
     {encoding: 'utf-8'},
   )
 

packages/plugin-r3f/package.json

@@ -19,7 +19,7 @@
     "url": "https://github.com/AriaMinaei/theatre",
     "directory": "packages/plugin-r3f"
   },
-  "main": "dist/index.cjs",
+  "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "files": [
@@ -43,24 +43,24 @@
     "typescript": "^4.3.2"
   },
   "dependencies": {
-    "@react-three/drei": "^7.2.2",
-    "@react-three/fiber": "^7.0.6",
     "@theatre/dataverse-react": "workspace:*",
     "lodash-es": "^4.17.21",
     "polished": "^4.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
     "react-merge-refs": "^1.1.0",
     "react-shadow": "^19.0.2",
     "react-use-measure": "^2.0.4",
     "reakit": "^1.3.8",
     "styled-components": "^5.3.0",
-    "three": "^0.130.1",
     "zustand": "^3.5.1"
   },
   "peerDependencies": {
+    "@react-three/drei": "*",
+    "@react-three/fiber": "*",
     "@theatre/core": "*",
-    "@theatre/studio": "*"
+    "@theatre/studio": "*",
+    "react": "*",
+    "react-dom": "*",
+    "three": "*"
   }
 }

theatre/core/package.json

@@ -13,7 +13,7 @@
     "email": "hello@theatrejs.com",
     "url": "https://www.theatrejs.com"
   },
-  "main": "dist/index.cjs",
+  "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "commonjs",
   "files": [

theatre/studio/package.json

@@ -13,7 +13,7 @@
     "email": "hello@theatrejs.com",
     "url": "https://www.theatrejs.com"
   },
-  "main": "dist/index.cjs",
+  "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist/index.cjs",

yarn.lock

@@ -3576,23 +3576,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/eslintrc@npm:^0.4.1":
-  version: 0.4.1
-  resolution: "@eslint/eslintrc@npm:0.4.1"
-  dependencies:
-    ajv: ^6.12.4
-    debug: ^4.1.1
-    espree: ^7.3.0
-    globals: ^12.1.0
-    ignore: ^4.0.6
-    import-fresh: ^3.2.1
-    js-yaml: ^3.13.1
-    minimatch: ^3.0.4
-    strip-json-comments: ^3.1.1
-  checksum: 418f5810c8dd9897d2457ceef098197d0e5f1ad345fbe4cd9256fd4223d7ea83d5e350f9091b3ab3483b6b1c367fa560df3ba1fccc7eb8ca6e1aae5a5b126d60
-  languageName: node
-  linkType: hard
-
 "@eslint/eslintrc@npm:^0.4.3":
   version: 0.4.3
   resolution: "@eslint/eslintrc@npm:0.4.3"
@@ -5683,6 +5666,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@theatre/dataverse-react@workspace:packages/dataverse-react"
   dependencies:
+    "@theatre/dataverse": "workspace:*"
     "@types/jest": ^26.0.23
     "@types/lodash-es": ^4.17.4
     "@types/node": ^15.6.2
@@ -5695,9 +5679,8 @@ __metadata:
     queue-microtask: ^1.2.3
     typescript: ^4.3.2
   peerDependencies:
-    "@theatre/dataverse": "*"
+    raect-dom: "*"
-    raect-dom: 17.0.2
+    react: "*"
-    react: 17.0.2
   languageName: unknown
   linkType: soft
 
@@ -5733,8 +5716,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@theatre/plugin-r3f@workspace:packages/plugin-r3f"
   dependencies:
-    "@react-three/drei": ^7.2.2
-    "@react-three/fiber": ^7.0.6
     "@theatre/dataverse-react": "workspace:*"
     "@types/jest": ^26.0.23
     "@types/lodash-es": ^4.17.4
@@ -5744,20 +5725,22 @@ __metadata:
     lodash-es: ^4.17.21
     npm-run-all: ^4.1.5
     polished: ^4.1.3
-    react: ^17.0.2
-    react-dom: ^17.0.2
     react-icons: ^4.2.0
     react-merge-refs: ^1.1.0
     react-shadow: ^19.0.2
     react-use-measure: ^2.0.4
     reakit: ^1.3.8
     styled-components: ^5.3.0
-    three: ^0.130.1
     typescript: ^4.3.2
     zustand: ^3.5.1
   peerDependencies:
+    "@react-three/drei": "*"
+    "@react-three/fiber": "*"
     "@theatre/core": "*"
     "@theatre/studio": "*"
+    react: "*"
+    react-dom: "*"
+    three: "*"
   languageName: unknown
   linkType: soft
 
@@ -6313,29 +6296,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^4.26.0":
+"@typescript-eslint/eslint-plugin@npm:^4.29.0, @typescript-eslint/eslint-plugin@npm:^4.5.0":
-  version: 4.26.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:4.26.0"
-  dependencies:
-    "@typescript-eslint/experimental-utils": 4.26.0
-    "@typescript-eslint/scope-manager": 4.26.0
-    debug: ^4.3.1
-    functional-red-black-tree: ^1.0.1
-    lodash: ^4.17.21
-    regexpp: ^3.1.0
-    semver: ^7.3.5
-    tsutils: ^3.21.0
-  peerDependencies:
-    "@typescript-eslint/parser": ^4.0.0
-    eslint: ^5.0.0 || ^6.0.0 || ^7.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: ccbe9e7cbb084cf0f35546de620e220d310a913805d3b428544a647b8d1e2a67a8c3f64b1656119c1beb734302bd83563bc1425b76a3c076178e5716ffe4f99a
-  languageName: node
-  linkType: hard
-
-"@typescript-eslint/eslint-plugin@npm:^4.5.0":
   version: 4.29.0
   resolution: "@typescript-eslint/eslint-plugin@npm:4.29.0"
   dependencies:
@@ -6356,22 +6317,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/experimental-utils@npm:4.26.0":
-  version: 4.26.0
-  resolution: "@typescript-eslint/experimental-utils@npm:4.26.0"
-  dependencies:
-    "@types/json-schema": ^7.0.7
-    "@typescript-eslint/scope-manager": 4.26.0
-    "@typescript-eslint/types": 4.26.0
-    "@typescript-eslint/typescript-estree": 4.26.0
-    eslint-scope: ^5.1.1
-    eslint-utils: ^3.0.0
-  peerDependencies:
-    eslint: "*"
-  checksum: 36048190f384a36fa376cba19a65066738db081c2bdecc5419fed0088a681671d2fa4e71047b715f7730a27b5235c7b46be5fdd8db4988cbc3fc43febc6a2893
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/experimental-utils@npm:4.29.0, @typescript-eslint/experimental-utils@npm:^4.0.1":
   version: 4.29.0
   resolution: "@typescript-eslint/experimental-utils@npm:4.29.0"
@@ -6403,24 +6348,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^4.26.0":
+"@typescript-eslint/parser@npm:^4.29.0, @typescript-eslint/parser@npm:^4.5.0":
-  version: 4.26.0
-  resolution: "@typescript-eslint/parser@npm:4.26.0"
-  dependencies:
-    "@typescript-eslint/scope-manager": 4.26.0
-    "@typescript-eslint/types": 4.26.0
-    "@typescript-eslint/typescript-estree": 4.26.0
-    debug: ^4.3.1
-  peerDependencies:
-    eslint: ^5.0.0 || ^6.0.0 || ^7.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: afbcbf0ca3f82e94a50877e1389265b1d6e344dadc1a1f28d9f0e58b4bacd1c79acf82228b12a9a172827128952ce5f87b5162b70ca0acdb7a58263a108252e0
-  languageName: node
-  linkType: hard
-
-"@typescript-eslint/parser@npm:^4.5.0":
   version: 4.29.0
   resolution: "@typescript-eslint/parser@npm:4.29.0"
   dependencies:
@@ -6437,16 +6365,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:4.26.0":
-  version: 4.26.0
-  resolution: "@typescript-eslint/scope-manager@npm:4.26.0"
-  dependencies:
-    "@typescript-eslint/types": 4.26.0
-    "@typescript-eslint/visitor-keys": 4.26.0
-  checksum: cda031b525af0400cb5d30e6d4bdec5b0f52a4f3557e845ab91194029be119be4a0c7b560cd63c15dfd32ab25f1be64020b9a6b85c2d0df15e2493c5cdb6509f
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/scope-manager@npm:4.29.0":
   version: 4.29.0
   resolution: "@typescript-eslint/scope-manager@npm:4.29.0"
@@ -6464,13 +6382,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:4.26.0":
-  version: 4.26.0
-  resolution: "@typescript-eslint/types@npm:4.26.0"
-  checksum: 011fe4cc886449659e7ba623aaeb7af34bcf2a35b4749de01a707ba92d3c232d9167533ad5008dedeb01f13f67e8d04b7b2d0d316f403173280c520656ce0c2f
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/types@npm:4.29.0":
   version: 4.29.0
   resolution: "@typescript-eslint/types@npm:4.29.0"
@@ -6497,24 +6408,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:4.26.0":
-  version: 4.26.0
-  resolution: "@typescript-eslint/typescript-estree@npm:4.26.0"
-  dependencies:
-    "@typescript-eslint/types": 4.26.0
-    "@typescript-eslint/visitor-keys": 4.26.0
-    debug: ^4.3.1
-    globby: ^11.0.3
-    is-glob: ^4.0.1
-    semver: ^7.3.5
-    tsutils: ^3.21.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 9f55637979d22f67f03936aac89f167d7a3cee9f9a81129ea23cba4f956894358a543c70a7a0063f6f306510d385cc965b2cde24231548607e42ed4b680b39bc
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/typescript-estree@npm:4.29.0":
   version: 4.29.0
   resolution: "@typescript-eslint/typescript-estree@npm:4.29.0"
@@ -6542,16 +6435,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:4.26.0":
-  version: 4.26.0
-  resolution: "@typescript-eslint/visitor-keys@npm:4.26.0"
-  dependencies:
-    "@typescript-eslint/types": 4.26.0
-    eslint-visitor-keys: ^2.0.0
-  checksum: 22f6327eaabc6bb9f57ee0682f57a6066c652f174c014cd9ee251c773ce213c5177faa141a4cc777272df349a71c5464e0ca282cf6667692c3a7a8175b919a24
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/visitor-keys@npm:4.29.0":
   version: 4.29.0
   resolution: "@typescript-eslint/visitor-keys@npm:4.29.0"
@@ -11450,7 +11333,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.21.5":
+"eslint-plugin-react@npm:^7.21.5, eslint-plugin-react@npm:^7.24.0":
   version: 7.24.0
   resolution: "eslint-plugin-react@npm:7.24.0"
   dependencies:
@@ -11483,12 +11366,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-unused-imports@npm:^1.1.1":
+"eslint-plugin-unused-imports@npm:^1.1.2":
-  version: 1.1.1
+  version: 1.1.2
-  resolution: "eslint-plugin-unused-imports@npm:1.1.1"
+  resolution: "eslint-plugin-unused-imports@npm:1.1.2"
   dependencies:
     eslint-rule-composer: ^0.3.0
-  checksum: 780f9b8b6fe2ee09a46bf56813dc2c2e7369436412d6e67192de054c4f934886b9b5a7fd9e32131f93f70c7bfb7d6130f42ed18f98ee1b5e0832adf461082db5
+  checksum: a897ea0b3227d02b03a14fc727df56af7f026e8eb4e106f1a3dc2ed6b23ec1dc0b776e0cec1da196ce3c8dd6fddf8330d8cee724254ad916a961b0fb12119a21
   languageName: node
   linkType: hard
 
@@ -11570,7 +11453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^7.11.0":
+"eslint@npm:^7.11.0, eslint@npm:^7.32.0":
   version: 7.32.0
   resolution: "eslint@npm:7.32.0"
   dependencies:
@@ -11620,55 +11503,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^7.27.0":
-  version: 7.27.0
-  resolution: "eslint@npm:7.27.0"
-  dependencies:
-    "@babel/code-frame": 7.12.11
-    "@eslint/eslintrc": ^0.4.1
-    ajv: ^6.10.0
-    chalk: ^4.0.0
-    cross-spawn: ^7.0.2
-    debug: ^4.0.1
-    doctrine: ^3.0.0
-    enquirer: ^2.3.5
-    escape-string-regexp: ^4.0.0
-    eslint-scope: ^5.1.1
-    eslint-utils: ^2.1.0
-    eslint-visitor-keys: ^2.0.0
-    espree: ^7.3.1
-    esquery: ^1.4.0
-    esutils: ^2.0.2
-    fast-deep-equal: ^3.1.3
-    file-entry-cache: ^6.0.1
-    functional-red-black-tree: ^1.0.1
-    glob-parent: ^5.0.0
-    globals: ^13.6.0
-    ignore: ^4.0.6
-    import-fresh: ^3.0.0
-    imurmurhash: ^0.1.4
-    is-glob: ^4.0.0
-    js-yaml: ^3.13.1
-    json-stable-stringify-without-jsonify: ^1.0.1
-    levn: ^0.4.1
-    lodash.merge: ^4.6.2
-    minimatch: ^3.0.4
-    natural-compare: ^1.4.0
-    optionator: ^0.9.1
-    progress: ^2.0.0
-    regexpp: ^3.1.0
-    semver: ^7.2.1
-    strip-ansi: ^6.0.0
-    strip-json-comments: ^3.1.0
-    table: ^6.0.9
-    text-table: ^0.2.0
-    v8-compile-cache: ^2.0.3
-  bin:
-    eslint: bin/eslint.js
-  checksum: c91a9a88091fb2654ec599b452f6d8aff22daa4a21761e762536877ec8b65cd6386c29ea2e0fec2668125a07c62973bc23922f924c999e140c1042b8cffca030
-  languageName: node
-  linkType: hard
-
 "espree@npm:^7.3.0, espree@npm:^7.3.1":
   version: 7.3.1
   resolution: "espree@npm:7.3.1"
@@ -12778,7 +12612,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^5.0.0, glob-parent@npm:^5.1.0, glob-parent@npm:^5.1.1, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.0, glob-parent@npm:~5.1.2":
+"glob-parent@npm:^5.1.0, glob-parent@npm:^5.1.1, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.0, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
   dependencies:
@@ -12849,15 +12683,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"globals@npm:^12.1.0":
-  version: 12.4.0
-  resolution: "globals@npm:12.4.0"
-  dependencies:
-    type-fest: ^0.8.1
-  checksum: 0b9764bdeab0bc9762dea8954a0d4c5db029420bd8bf693df9098ce7e045ccaf9b2d259185396fd048b051d42fdc8dc7ab02af62e3dbeb2324a78a05aac8d33c
-  languageName: node
-  linkType: hard
-
 "globals@npm:^13.6.0":
   version: 13.7.0
   resolution: "globals@npm:13.7.0"
@@ -23146,14 +22971,15 @@ fsevents@^1.2.7:
     "@babel/preset-env": ^7.14.4
     "@babel/preset-react": ^7.13.13
     "@babel/preset-typescript": ^7.13.0
-    "@typescript-eslint/eslint-plugin": ^4.26.0
+    "@typescript-eslint/eslint-plugin": ^4.29.0
-    "@typescript-eslint/parser": ^4.26.0
+    "@typescript-eslint/parser": ^4.29.0
     esbuild: ^0.12.15
     esbuild-jest: ^0.5.0
-    eslint: ^7.27.0
+    eslint: ^7.32.0
     eslint-plugin-jsx-a11y: ^6.4.1
+    eslint-plugin-react: ^7.24.0
     eslint-plugin-react-hooks: ^4.2.0
-    eslint-plugin-unused-imports: ^1.1.1
+    eslint-plugin-unused-imports: ^1.1.2
     husky: ^6.0.0
     jest: ^27.0.3
     lerna: ^4.0.0