Add theatric to the release scripts and fix compat issues

compatibility-tests/fixtures/next/package/package.json

@@ -9,6 +9,7 @@
     "@theatre/core": "0.0.1-COMPAT.1",
     "@theatre/r3f": "0.0.1-COMPAT.1",
     "@theatre/studio": "0.0.1-COMPAT.1",
+    "theatric": "0.0.1-COMPAT.1",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

compatibility-tests/fixtures/next/package/pages/theatric.js

@@ -0,0 +1,77 @@
+import {button, initialize, useControls} from 'theatric'
+import {render} from 'react-dom'
+import React, {useState} from 'react'
+
+// initialize()
+
+function SomeComponent({id}) {
+  const {foo, $get, $set} = useControls(
+    {
+      foo: 0,
+      bar: 0,
+      bez: button(() => {
+        $set((p) => p.foo, 2)
+        $set((p) => p.bar, 3)
+        console.log($get((p) => p.foo))
+      }),
+    },
+    {folder: id},
+  )
+
+  return (
+    <div>
+      {id}: {foo}
+    </div>
+  )
+}
+
+export default function App() {
+  const {bar, $set, $get} = useControls({
+    bar: {foo: 'bar'},
+    baz: button(() => console.log($get((p) => p.bar))),
+  })
+
+  const {another, panel, yo} = useControls(
+    {
+      another: '',
+      panel: '',
+      yo: 0,
+    },
+    {panel: 'My panel'},
+  )
+
+  const {} = useControls({})
+
+  const [showComponent, setShowComponent] = useState(false)
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div>{JSON.stringify(bar)}</div>
+      <SomeComponent id="first" />
+      <SomeComponent id="second" />
+      <button
+        onClick={() => {
+          setShowComponent(!showComponent)
+        }}
+      >
+        Show another component
+      </button>
+      <button
+        onClick={() => {
+          $set((p) => p.bar.foo, $get((p) => p.bar.foo) + 1)
+        }}
+      >
+        Increment stuff
+      </button>
+      {showComponent && <SomeComponent id="hidden" />}
+      {yo}
+    </div>
+  )
+}

compatibility-tests/scripts/scripts.mjs

@@ -9,6 +9,13 @@ import onCleanup from 'node-cleanup'
 import * as verdaccioPackage from 'verdaccio'
 import {chromium, devices} from 'playwright'
 
+/**
+ * @param {string} pkg
+ * @returns boolean
+ */
+const isTheatreDependency = (pkg) =>
+  pkg.startsWith('@theatre/') || pkg === 'theatric'
+
 const verbose = !!argv['verbose']
 
 if (!verbose) {
@@ -120,7 +127,7 @@ async function patchTheatreDependencies(pathToPackageJson, version) {
     const dependencies = packageJson[dependencyType]
     if (dependencies) {
       for (const dependencyName of Object.keys(dependencies)) {
-        if (dependencyName.startsWith('@theatre/')) {
+        if (isTheatreDependency(dependencyName)) {
           dependencies[dependencyName] = version
         }
       }
@@ -210,6 +217,7 @@ const packagesToPublish = [
   '@theatre/react',
   '@theatre/browser-bundles',
   '@theatre/r3f',
+  'theatric',
 ]
 
 /**

compatibility-tests/verdaccio.yml

@@ -15,6 +15,9 @@ packages:
   '@theatre/*':
     access: $all
     publish: $all
+  'theatric':
+    access: $all
+    publish: $all
   '@*/*':
     access: $all
     publish: $all