feat: fixed viewer & objectloader build configs

.gitignore

@@ -2,6 +2,7 @@
 packages/server/.env
 packages/frontend/dist
 packages/viewer/dist
+packages/objectloader/dist
 *.env
 *.env.test
 *.crt

.prettierignore

@@ -1,9 +1,12 @@
 node_modules
 build
 dist
+dist2
 coverage
 .nyc_output
 packages/server/reports*
+packages/objectloader/examples/browser/objectloader.web.js
+packages/viewer/example/speckleviewer.web.js
 package-lock.json
 yarn.lock
 

packages/frontend/.browserslistrc

@@ -1,3 +1 @@
-> 1%
-last 2 versions
-not dead
+since 2019

packages/frontend/babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   presets: ['@vue/cli-plugin-babel/preset'],
-  exclude: [/(Speckle.js\.). /]
+  ignore: ['../viewer/dist', '../objectloader/dist']
 }

packages/frontend/package.json

@@ -14,7 +14,7 @@
     "node": "^16.0.0"
   },
   "dependencies": {
-    "@speckle/viewer": "^2.3.17-alpha.2889",
+    "@speckle/viewer": "file:../viewer",
     "@tryghost/content-api": "^1.5.12",
     "@vuejs-community/vue-filter-date-format": "^1.6.3",
     "@vuejs-community/vue-filter-date-parse": "^1.1.6",

packages/frontend/vue.config.js

@@ -1,5 +1,4 @@
 /* eslint-env node */
-
 module.exports = {
   configureWebpack: {
     devtool: 'eval-source-map'

packages/objectloader/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "corejs": "3"
+      }
+    ]
+  ],
+  "ignore": ["node_modules/**/*"]
+}

packages/objectloader/.browserslistrc

@@ -0,0 +1 @@
+since 2019

packages/objectloader/.eslintrc.cjs

@@ -10,7 +10,8 @@ const config = {
   },
   parserOptions: {
     sourceType: 'module'
-  }
+  },
+  ignorePatterns: ['examples/browser/objectloader.web.js']
 }
 
 module.exports = config

packages/objectloader/.gitignore

@@ -0,0 +1,2 @@
+dist
+examples/browser/objectloader.web.js

packages/objectloader/examples/browser/index.html

@@ -14,8 +14,8 @@
       To ensure this example runs correctly, please serve this file from a local http
       server - if you manually open the file in a browser, it might not work.
     </p>
-    <button onclick="loadData()">PRESS ME</button>
+    <button type="button" onclick="loadData()">PRESS ME</button>
   </body>
 
-  <script src="script.js" type="module"></script>
+  <script src="./script.js" type="module"></script>
 </html>

packages/objectloader/examples/browser/script.js

@@ -1,4 +1,4 @@
-import ObjectLoader from '../../index.js'
+import ObjectLoader from './objectloader.web.js'
 window.ObjectLoader = ObjectLoader
 
 // let loader = new ObjectLoader({serverUrl:"https://latest.speckle.dev", streamId:"16d73b756a", objectId:"99b20746460c4369f25e08e92c988a9d"})

packages/objectloader/examples/node/script.mjs

@@ -1,7 +1,6 @@
 // Since Node v<18 does not provide fetch, we need to pass it in the options object. Note that fetch must return a WHATWG compliant stream, so cross-fetch won't work, but node/undici's implementation will.
-
 import { fetch } from 'undici'
-import ObjectLoader from '../../index.js'
+import ObjectLoader from '../../dist/objectloader.js'
 
 const loader = new ObjectLoader({
   serverUrl: 'https://latest.speckle.dev',

packages/objectloader/jsconfig.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "module": "es2020"
   },
-  "include": ["index.js", "examples"]
+  "include": ["src/**", "examples"]
 }

packages/objectloader/package.json

@@ -2,9 +2,9 @@
   "name": "@speckle/objectloader",
   "version": "2.3.17-alpha.2889",
   "description": "Simple API helper to stream in objects from the Speckle Server.",
-  "main": "index.js",
+  "main": "dist/objectloader.js",
+  "module": "dist/objectloader.esm.js",
   "homepage": "https://speckle.systems",
-  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/specklesystems/speckle-server.git",
@@ -14,8 +14,11 @@
     "node": "^16.0.0"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint . --ext .js,.ts"
+    "lint": "eslint . --ext .js,.ts",
+    "build:dev": "rollup --config",
+    "build": "NODE_ENV=production rollup --config",
+    "dev": "rollup --config --watch",
+    "example": "EXAMPLE_BUILD=1 rollup --config && http-server ./examples/browser -p 3031 -o"
   },
   "keywords": [
     "speckle",
@@ -24,10 +27,22 @@
   ],
   "author": "AEC Systems",
   "license": "Apache-2.0",
+  "dependencies": {
+    "core-js": "^3.21.1",
+    "regenerator-runtime": "^0.13.7"
+  },
   "devDependencies": {
+    "@babel/preset-env": "^7.16.11",
+    "@rollup/plugin-babel": "^5.3.1",
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
+    "http-server": "^14.1.0",
     "prettier": "^2.5.1",
-    "undici": "^4.14.1"
+    "rollup": "^2.70.1",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "undici": "^4.14.1",
+    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-node-resolve": "^13.1.3"
   }
 }

packages/objectloader/readme.md

@@ -12,12 +12,18 @@ Comprehensive developer and user documentation can be found in our:
 
 This is a small utility class that helps you stream an object and all its sub-components from the Speckle Server API. It is intended to be used in contexts where you want to "download" the whole object, or iteratively traverse its whole tree.
 
+### Examples
+
+If you've got this repo checked out locally, you can run `npm run example` to run an example web page running ObjectLoader in the browser at 'http://127.0.0.1:3031/'. This will run the example HTML found under ./examples/browser/'.
+
+To test ObjectLoader in a node environment, just run `node ./examples/node/script.mjs`
+
 ### In the browser
 
 Here's a sample way on how to use it, pilfered from the [3d viewer package](../viewer):
 
 ```js
-
+import ObjectLoader from '@speckle/objectloader';
 
 async load( { serverUrl, token, streamId, objectId } ) {
 
@@ -40,34 +46,41 @@ async load( { serverUrl, token, streamId, objectId } ) {
 
 If you do not want to process the objects one by one as they are streamed to you, you can use the `getAndConstructObject()` method. Here's an example:
 
-````js
+```js
+import ObjectLoader from '@speckle/objectloader'
 
-let loader = new ObjectLoader( {
-  serverUrl: "https://latest.speckle.dev",
-  streamId: "3ed8357f29",
-  objectId: "0408ab9caaa2ebefb2dd7f1f671e7555",
+let loader = new ObjectLoader({
+  serverUrl: 'https://latest.speckle.dev',
+  streamId: '3ed8357f29',
+  objectId: '0408ab9caaa2ebefb2dd7f1f671e7555',
   options: {
     fullyTraverseArrays: false, // Default: false. By default, if an array starts with a primitive type, it will not be traversed. Set it to true if you want to capture scenarios in which lists can have intersped objects and primitives, e.g. [ 1, 2, "a", { important object } ]
-    excludeProps: [ 'displayValue', 'displayMesh', '__closure' ] // Default: []. Any prop names that you pass in here will be ignored from object construction traversal.
+    excludeProps: ['displayValue', 'displayMesh', '__closure'] // Default: []. Any prop names that you pass in here will be ignored from object construction traversal.
   }
-} )
+})
 
-let obj = await loader.getAndConstructObject( ( e ) => console.log( 'Progress', e ) )
+let obj = await loader.getAndConstructObject((e) => console.log('Progress', e))
+```
 
 ### On the server
 
 Since Node.js does not yet support the [`fetch API`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch), you'll need to provide your own `fetch` function in the options object. Note that `fetch` must return a [Web Stream](https://nodejs.org/api/webstreams.html), so [node-fetch](https://github.com/node-fetch/node-fetch) won't work, but [node/undici's](https://undici.nodejs.org/) implementation will.
 
 ```js
+import ObjectLoader from '@speckle/objectloader'
 import { fetch } from 'undici'
 
 let loader = new ObjectLoader({
   serverUrl: 'https://latest.speckle.dev',
   streamId: '3ed8357f29',
   objectId: '0408ab9caaa2ebefb2dd7f1f671e7555',
-  options: { enableCaching: false, excludeProps: [], fetch },
+  options: { enableCaching: false, excludeProps: [], fetch }
 })
-````
+```
+
+## Development
+
+Run `npm run build` to build prod release, run `npm run build:dev` to build dev release. Or run `npm run dev` to run the build in `watch` mode.
 
 ## Community
 

packages/objectloader/rollup.config.js

@@ -0,0 +1,66 @@
+import commonjs from '@rollup/plugin-commonjs'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import { terser } from 'rollup-plugin-terser'
+import { babel } from '@rollup/plugin-babel'
+import clean from 'rollup-plugin-delete'
+import pkg from './package.json'
+
+const isProd = process.env.NODE_ENV === 'production'
+const isExample = !!process.env.EXAMPLE_BUILD
+
+const sourcemap = isProd ? false : 'inline'
+
+/**
+ * Build config
+ * @param {boolean} isWebBuild If set to true will generate a web-ready config with everything bundled into a single file
+ * @returns {import('rollup').RollupOptions}
+ */
+function buildConfig(isWebBuild = false) {
+  /** @type {import('rollup').RollupOptions} */
+  const config = {
+    input: 'src/index.js',
+    output: [
+      {
+        file: isWebBuild
+          ? 'examples/browser/objectloader.web.js'
+          : 'dist/objectloader.esm.js',
+        format: 'esm',
+        sourcemap,
+        exports: 'default'
+      },
+      ...(isWebBuild
+        ? []
+        : [
+            {
+              file: 'dist/objectloader.js',
+              format: 'cjs',
+              sourcemap,
+              exports: 'default'
+            }
+          ])
+    ],
+    plugins: [
+      ...(isWebBuild
+        ? [
+            // Bundling in all deps in web build
+            commonjs(),
+            nodeResolve()
+          ]
+        : [
+            // Cleaning dir only inside 'dist'
+            clean({ targets: 'dist/*' })
+          ]),
+      babel({ babelHelpers: 'bundled' }),
+      ...(isProd ? [terser()] : [])
+    ],
+    external: isWebBuild
+      ? undefined
+      : // In non web build we don't want to bundle in any deps
+        Object.keys(pkg.dependencies || {}).map((d) => new RegExp(`^${d}(\\/.*)?$`))
+  }
+
+  return config
+}
+
+const config = isExample ? buildConfig(true) : buildConfig()
+export default config

packages/objectloader/src/index.js

@@ -1,3 +1,7 @@
+// POLYFILLS
+import 'core-js'
+import 'regenerator-runtime/runtime'
+
 /**
  * Simple client that streams object info from a Speckle Server.
  * TODO: Object construction progress reporting is weird.

packages/viewer/.babelrc

@@ -1,23 +1,12 @@
 {
-  "ignore": ["node_modules/**/*"],
   "presets": [
-    ["@babel/preset-typescript"],
     [
       "@babel/preset-env",
       {
-        "loose": true,
-        "targets": {
-          "browsers": "last 2 versions, > 0.5%, ie >= 11",
-          "esmodules": true
-        }
+        "useBuiltIns": "entry",
+        "corejs": "3"
       }
-    ],
-    "@babel/preset-react"
+    ]
   ],
-  "plugins": [
-    ["@babel/plugin-proposal-class-properties", { "loose": true }],
-    "babel-plugin-add-module-exports",
-    "@babel/plugin-transform-classes",
-    ["@babel/plugin-proposal-private-methods", { "loose": true }]
-  ]
+  "ignore": ["node_modules/**/*"]
 }

packages/viewer/.browserslistrc

@@ -0,0 +1 @@
+since 2019

packages/viewer/.eslintrc.js

@@ -13,7 +13,8 @@ const config = {
   },
   rules: {
     'no-console': ['warn', { allow: ['warn', 'error'] }]
-  }
+  },
+  ignorePatterns: ['dist2', 'example/speckleviewer.web.js']
 }
 
 module.exports = config

packages/viewer/.gitignore

@@ -1 +1,2 @@
-example/main.*
+example/speckleviewer.web.js
+dist2

packages/viewer/example/index.html

@@ -25,7 +25,7 @@
         width: 100%;
       }
     </style>
-    <script defer src="demo.js"></script>
+    <script src="./speckleviewer.web.js" type="module"></script>
   </head>
 
   <body style="background: #e4e4e4">

packages/viewer/package.json

@@ -8,7 +8,8 @@
     "url": "https://github.com/specklesystems/speckle-server.git",
     "directory": "packages/viewer"
   },
-  "main": "dist/Speckle.js",
+  "main": "dist/speckleviewer.js",
+  "module": "dist/speckleviewer.esm.js",
   "sourceType": "module",
   "files": [
     "dist"
@@ -17,9 +18,10 @@
     "node": "^16.0.0"
   },
   "scripts": {
-    "serve": "webpack serve --env dev --config webpack.config.example.js --port 9002",
-    "dev": "webpack --progress --watch --env dev",
-    "build": "webpack --env dev && webpack --env build",
+    "build": "NODE_ENV=production rollup --config",
+    "build:dev": "rollup --config",
+    "dev": "rollup --config --watch",
+    "example": "EXAMPLE_BUILD=1 rollup --config && http-server ./example -p 3032 -o",
     "prepublishOnly": "npm run build",
     "lint": "eslint . --ext .js,.ts"
   },
@@ -33,11 +35,13 @@
     "threejs"
   ],
   "dependencies": {
-    "@speckle/objectloader": "^2.3.17-alpha.2889",
+    "@speckle/objectloader": "^2.4.0",
     "camera-controls": "^1.33.1",
+    "core-js": "^3.21.1",
     "hold-event": "^0.1.0",
     "lodash.debounce": "^4.0.8",
     "rainbowvis.js": "^1.0.1",
+    "regenerator-runtime": "^0.13.7",
     "three": "^0.136.0"
   },
   "devDependencies": {
@@ -50,21 +54,24 @@
     "@babel/preset-env": "7.15.8",
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "7.15.0",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "babel-jest": "27.2.5",
     "babel-loader": "^8.0.0-beta.4",
     "babel-plugin-add-module-exports": "1.0.4",
     "babel-plugin-transform-class-properties": "6.24.1",
-    "clean-webpack-plugin": "^4.0.0",
+    "browserslist": "^4.20.2",
     "cross-env": "7.0.3",
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
-    "html-webpack-plugin": "^5.3.2",
+    "http-server": "^14.1.0",
     "jest": "27.2.5",
     "mocha": "^9.1.2",
     "prettier": "^2.5.1",
-    "webpack": "5.58.2",
-    "webpack-cli": "^4.9.0",
-    "webpack-dev-server": "^4.3.1",
+    "rollup": "^2.70.1",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
     "yargs": "^17.2.1"
   }
 }

packages/viewer/readme.md

@@ -10,29 +10,30 @@ We're working to stabilize the 2.0 API, and until then there will be breaking ch
 
 Comprehensive developer and user documentation can be found in our:
 
-#### 📚 [Speckle Docs website](https://speckle.guide/dev/)
+📚 [Speckle Docs website](https://speckle.guide/dev/)
 
 ## Getting started
 
-Note, these are WIP instructions. More details coming soon!
+Working with viewer (for more, check `./src/example.js`):
 
-For development purposes, to start a webpack live reload server run:
+```js
+import { Viewer } from '@speckle/viewer'
 
-```
-npm run serve
+const v = new Viewer({
+  container: document.getElementById('renderer'),
+  showStats: true
+})
 ```
 
-You can now access the example at [http://localhost:9000/example.html](http://localhost:9000/example.html).
+### Development
 
-To build the library, you should run:
+For testing purposes you can see viewer in action by running `npm run example`, which will run an example server at 'http://127.0.0.1:3002'.
 
-```
-npm run build
-```
+To build the library run `npm run build`, to build a dev (unminified w/ sourcemaps) build run `npm run build:dev` and to run a dev build in watch mode run `npm run dev`.
 
 ## API
 
-Syntax and examples for supported API methods. The examples assume a Viewer instance named `v`.
+Syntax and examples for supported API methods. The examples assume a `Viewer` instance named `v`.
 
 ### Load/Unload an object
 

packages/viewer/rollup.config.js

@@ -0,0 +1,62 @@
+import commonjs from '@rollup/plugin-commonjs'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import { terser } from 'rollup-plugin-terser'
+import { babel } from '@rollup/plugin-babel'
+import clean from 'rollup-plugin-delete'
+import pkg from './package.json'
+
+const isProd = process.env.NODE_ENV === 'production'
+const isExample = !!process.env.EXAMPLE_BUILD
+
+const sourcemap = isProd ? false : 'inline'
+
+/**
+ * Build config
+ * @param {boolean} isWebBuild If set to true will generate a web-ready config with everything bundled into a single file
+ * @returns {import('rollup').RollupOptions}
+ */
+function buildConfig(isWebBuild = false) {
+  /** @type {import('rollup').RollupOptions} */
+  const config = {
+    input: isWebBuild ? 'src/example.js' : 'src/index.js',
+    output: [
+      {
+        file: isWebBuild ? 'example/speckleviewer.web.js' : 'dist/speckleviewer.esm.js',
+        format: 'esm',
+        sourcemap
+      },
+      ...(isWebBuild
+        ? []
+        : [
+            {
+              file: 'dist/speckleviewer.js',
+              format: 'cjs',
+              sourcemap
+            }
+          ])
+    ],
+    plugins: [
+      ...(isWebBuild
+        ? [
+            // Bundling in all deps in web build
+            commonjs(),
+            nodeResolve()
+          ]
+        : [
+            // Cleaning dir only inside dist
+            clean({ targets: 'dist/*' })
+          ]),
+      babel({ babelHelpers: 'bundled' }),
+      ...(isProd ? [terser()] : [])
+    ],
+    external: isWebBuild
+      ? undefined
+      : // In non web build we don't want to bundle in any deps
+        Object.keys(pkg.dependencies || {}).map((d) => new RegExp(`^${d}(\\/.*)?$`))
+  }
+
+  return config
+}
+
+const config = isExample ? buildConfig(true) : buildConfig()
+export default config

packages/viewer/src/example.js

@@ -1,4 +1,9 @@
 /* eslint-disable */
+
+/**
+ * NOT PART OF THE ACTUAL LIBRARY, ONLY USED TO GENERATE THE EXAMPLE WEB BUILD
+ */
+
 import Viewer from './modules/Viewer'
 
 setInterval(() => {

packages/viewer/src/index.js

@@ -1,3 +1,7 @@
+// POLYFILLS
+import 'core-js'
+import 'regenerator-runtime/runtime'
+
 import Viewer from './modules/Viewer'
 import Converter from './modules/converter/Converter'
 

packages/viewer/webpack.config.example.js

@@ -1,61 +0,0 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin')
-const path = require('path')
-const yargs = require('yargs')
-const env = yargs.argv.env
-
-const filename = 'demo'
-
-let outputFile, mode
-
-if (env === 'build') {
-  mode = 'production'
-  outputFile = filename + '.min.js'
-} else {
-  mode = 'development'
-  outputFile = filename + '.js'
-}
-
-const config = {
-  mode,
-  entry: path.resolve(__dirname + '/src/app.js'),
-  target: 'web',
-  devtool: 'source-map',
-  output: {
-    path: path.resolve(__dirname + '/example'),
-    filename: outputFile
-  },
-  module: {
-    rules: [
-      {
-        test: /(\.jsx|\.js|\.ts|\.tsx)$/,
-        use: {
-          loader: 'babel-loader'
-        },
-        exclude: /(node_modules|bower_components)/
-      }
-    ]
-  },
-  plugins: [
-    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
-    new HtmlWebpackPlugin({
-      title: 'Speckle Viewer Example',
-      template: 'src/assets/example.html',
-      filename: 'example.html'
-    })
-  ],
-  resolve: {
-    modules: [path.resolve('./node_modules'), path.resolve('./src')],
-    extensions: ['.json', '.js']
-  },
-  devServer: {
-    static: path.join(__dirname, 'example'),
-    compress: false,
-    port: 9000,
-    devMiddleware: {
-      writeToDisk: true
-    }
-  }
-}
-
-module.exports = config

packages/viewer/webpack.config.js

@@ -1,48 +0,0 @@
-const { CleanWebpackPlugin } = require('clean-webpack-plugin')
-const path = require('path')
-const yargs = require('yargs')
-const env = yargs.argv.env
-
-const libraryName = 'Speckle'
-
-let outputFile, mode
-
-if (env === 'build') {
-  mode = 'production'
-  outputFile = libraryName + '.js'
-} else {
-  mode = 'development'
-  outputFile = libraryName + '.js'
-}
-
-const config = {
-  mode,
-  entry: path.resolve(__dirname + '/src/index.js'),
-  target: 'web',
-  devtool: 'source-map',
-  output: {
-    path: path.resolve(__dirname + '/dist'),
-    filename: outputFile,
-    library: libraryName,
-    libraryTarget: 'umd',
-    globalObject: 'this'
-  },
-  module: {
-    rules: [
-      {
-        test: /(\.jsx|\.js|\.ts|\.tsx)$/,
-        use: {
-          loader: 'babel-loader'
-        },
-        exclude: /(node_modules|bower_components)/
-      }
-    ]
-  },
-  plugins: [new CleanWebpackPlugin({ cleanStaleWebpackAssets: false })],
-  resolve: {
-    modules: [path.resolve('./node_modules'), path.resolve('./src')],
-    extensions: ['.json', '.js']
-  }
-}
-
-module.exports = config