Implemented @theatre/browser-bundles

packages/browser-bundles/.gitignore

@@ -0,0 +1 @@
+/dist

packages/browser-bundles/LICENSE

@@ -0,0 +1,3 @@
+This is a bundle of @theatre/core and @theatre/studio packages.
+
+See their licenses in their repo: https://github.com/ariaminaei/theatre

packages/browser-bundles/README.md

@@ -0,0 +1,32 @@
+# Theatre.js browser bundles
+
+A custom build of Theatre.js that you can use via a `<script>` tag rather than using a bundler.
+
+## How to use
+
+There are currently two builds:
+
+* `dist/core-and-studio.js`
+* `dist/core-only.min.js`
+
+As the names imply, one includes both `@theatre/studio` and `@theatre/core`, while the other is a minified version of `@theatre/core`.
+
+Example:
+
+```html
+<script src="path/to/core-and-studio.js"></script>
+<script>
+  // here, core is equal to `import * as core from '@theatre/core`
+  const core = Theatre.core
+  // here, studio is equal to `import studio from '@theatre/studio`.
+  // Note this would be undefined if you're using `core-only.min.js`
+  const studio = Theatre.studio
+
+  // only call this if you're using the core-and-studio.js bundle
+  studio.initialize()
+
+  const project = core.getProject("My project")
+  const sheet = project.sheet("...")
+  // and so on...
+</script>
+```

packages/browser-bundles/devEnv/build.ts

@@ -0,0 +1,61 @@
+import * as path from 'path'
+import {build} from 'esbuild'
+import type {Plugin} from 'esbuild'
+
+const definedGlobals = {
+  global: 'window',
+}
+
+function createBundles(watch: boolean) {
+  const pathToPackage = path.join(__dirname, '../')
+  const esbuildConfig: Parameters<typeof build>[0] = {
+    bundle: true,
+    sourcemap: true,
+    define: definedGlobals,
+    watch,
+    platform: 'browser',
+    loader: {
+      '.png': 'dataurl',
+      '.glb': 'dataurl',
+      '.gltf': 'dataurl',
+      '.svg': 'dataurl',
+    },
+    mainFields: ['browser', 'module', 'main'],
+    target: ['firefox57', 'chrome58'],
+    conditions: ['browser', 'node'],
+  }
+
+  // build({
+  //   ...esbuildConfig,
+  //   entryPoints: [path.join(pathToPackage, 'src/core-only.ts')],
+  //   outfile: path.join(pathToPackage, 'dist/core-only.js'),
+  //   format: 'iife',
+  // })
+
+  build({
+    ...esbuildConfig,
+    entryPoints: [path.join(pathToPackage, 'src/core-and-studio.ts')],
+    outfile: path.join(pathToPackage, 'dist/core-and-studio.js'),
+    format: 'iife',
+  })
+
+  build({
+    ...esbuildConfig,
+    entryPoints: [path.join(pathToPackage, 'src/core-only.ts')],
+    outfile: path.join(pathToPackage, 'dist/core-only.min.js'),
+    minify: true,
+    format: 'iife',
+    define: {
+      ...definedGlobals,
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    },
+  })
+
+  // build({
+  //   ...esbuildConfig,
+  //   outfile: path.join(pathToPackage, 'dist/index.mjs'),
+  //   format: 'esm',
+  // })
+}
+
+createBundles(false)

packages/browser-bundles/devEnv/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  
+}

packages/browser-bundles/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@theatre/browser-bundles",
+  "version": "0.4.3",
+  "license": "SEE LICENSE IN LICENSE",
+  "author": {
+    "name": "Aria Minaei",
+    "email": "aria@theatrejs.com",
+    "url": "https://github.com/AriaMinaei"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AriaMinaei/theatre",
+    "directory": "packages/browser-bundles"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "node -r esbuild-register ./devEnv/build.ts",
+    "prepublish": "node ../../devEnv/ensurePublishing.js"
+  },
+  "devDependencies": {
+    "esbuild": "^0.12.15",
+    "esbuild-register": "^2.5.0",
+    "npm-run-all": "^4.1.5",
+    "typescript": "^4.4.2"
+  },
+  "peerDependencies": {
+    "@theatre/core": "*",
+    "@theatre/studio": "*"
+  }
+}

packages/browser-bundles/src/core-and-studio.ts

@@ -0,0 +1,8 @@
+import * as core from '@theatre/core'
+import studio from '@theatre/studio'
+
+// @ts-ignore
+window.Theatre = {
+  core,
+  studio,
+}

packages/browser-bundles/src/core-only.ts

@@ -0,0 +1,12 @@
+import * as core from '@theatre/core'
+
+// @ts-ignore
+window.Theatre = {
+  core,
+  get studio() {
+    alert(
+      "Theatre.studio is only available in the core-and-studio.js bundle. You're using the core-only.min.js bundle.",
+    )
+    return undefined
+  },
+}

packages/browser-bundles/test.html

@@ -0,0 +1,11 @@
+<script src="./dist/core-and-studio.js"></script>
+<script>
+  const {core} = Theatre
+  const studio = Theatre.studio
+  studio.initialize()
+
+  const project = core.getProject('My project')
+  const sheet = project.sheet('My sheet')
+  const obj = sheet.object('Box', {x: 0, y: 0})
+  console.log(obj.value.x)
+</script>

packages/browser-bundles/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "lib": ["ESNext", "DOM"],
+    "rootDir": "src",
+    "types": ["jest", "node"],
+    "emitDeclarationOnly": true,
+    "target": "es6",
+    "composite": true
+  },
+  "include": ["./src/**/*"],
+  "references": [{"path": "../dataverse"}, {"path": "../../theatre"}]
+}

yarn.lock

@@ -5207,6 +5207,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@theatre/browser-bundles@workspace:packages/browser-bundles":
+  version: 0.0.0-use.local
+  resolution: "@theatre/browser-bundles@workspace:packages/browser-bundles"
+  dependencies:
+    "@types/jest": ^26.0.23
+    "@types/node": ^15.6.2
+    "@types/react": ^17.0.9
+    "@types/react-dom": ^17.0.6
+    esbuild: ^0.12.15
+    esbuild-register: ^2.5.0
+    npm-run-all: ^4.1.5
+    typescript: ^4.4.2
+  peerDependencies:
+    "@theatre/core": "*"
+    "@theatre/studio": "*"
+  languageName: unknown
+  linkType: soft
+
 "@theatre/core@workspace:*, @theatre/core@workspace:theatre/core":
   version: 0.0.0-use.local
   resolution: "@theatre/core@workspace:theatre/core"