fix(Package): Setup for sepearate browser and lib distributions

package.json

@@ -5,7 +5,9 @@
   "files": [
     "/dist"
   ],
-  "main": "./dist/index.js",
+  "browser": "./dist/browser/index.js",
+  "main": "./dist/lib/index.js",
+  "types": "./dist/lib/index.d.ts",
   "scripts": {
     "prepare": "npm run update",
     "update": "npm run update:selectors && npm run update:examples && npm run update:themes && npm run update:extensions",
@@ -15,7 +17,9 @@
     "update:themes": "ts-node --files src/scripts/themes.ts update",
     "create:extension": "ts-node --files src/scripts/extensions.ts create",
     "update:extensions": "ts-node --files src/scripts/extensions.ts update",
-    "build": "webpack --mode production && tsc --emitDeclarationOnly",
+    "build": "npm run build:browser && npm run build:lib",
+    "build:browser": "webpack --mode production",
+    "build:lib": "tsc --project tsconfig-lib.json",
     "dev": "webpack-dev-server --mode development --hot --open",
     "docs": "webpack --mode production --env.docs=true",
     "lint": "npm run lint:styles && npm run lint:scripts",

src/index.ts

@@ -1,2 +1,4 @@
-export * from './examples'
+// This file defines the modules available in the `dist/lib` folder
+// for Node.js. It is used in `tsconfig-dist.json`. Only add things
+// here that should be in that folder.
 export * from './themes'

src/scripts/themes.ts

@@ -96,9 +96,9 @@ function update(): void {
  * Map of theme Javascript modules
  */
 export const themes: {
-  ${themes.map(theme => `${theme}: Promise<unknown>`).join('\n  ')}
+  ${themes.map(theme => `${theme}: string`).join('\n  ')}
 } = {
-  ${themes.map(theme => `${theme}: import('./${theme}')`).join(',\n  ')}
+  ${themes.map(theme => `${theme}: '${theme}'`).join(',\n  ')}
 }\n`
   )
 }

src/themes/index.ts

@@ -17,11 +17,11 @@ export const isTheme = (name: string): name is keyof typeof themes =>
 
 /**
  * Given a string, will return a matching theme,
- * falling back to the first in if none matches.
+ * falling back to `stencila` if none matches.
  *
  * @param {string} name Name of the theme to look for
  */
 export const resolveTheme = (name?: string): string => {
   const theme = name === undefined ? '' : name.toLowerCase().trim()
-  return theme !== 'skeleton' && isTheme(theme) ? theme : 'stencila'
+  return isTheme(theme) ? theme : 'stencila'
 }

src/themes/themes.ts

@@ -4,19 +4,19 @@
  * Map of theme Javascript modules
  */
 export const themes: {
-  bootstrap: Promise<unknown>
-  elife: Promise<unknown>
-  nature: Promise<unknown>
-  plos: Promise<unknown>
-  rpng: Promise<unknown>
-  skeleton: Promise<unknown>
-  stencila: Promise<unknown>
+  bootstrap: string
+  elife: string
+  nature: string
+  plos: string
+  rpng: string
+  skeleton: string
+  stencila: string
 } = {
-  bootstrap: import('./bootstrap'),
-  elife: import('./elife'),
-  nature: import('./nature'),
-  plos: import('./plos'),
-  rpng: import('./rpng'),
-  skeleton: import('./skeleton'),
-  stencila: import('./stencila')
+  bootstrap: 'bootstrap',
+  elife: 'elife',
+  nature: 'nature',
+  plos: 'plos',
+  rpng: 'rpng',
+  skeleton: 'skeleton',
+  stencila: 'stencila'
 }

tsconfig-lib.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["./src/index.ts"],
+  "compilerOptions": {
+    "outDir": "dist/lib"
+  }
+}

tsconfig.json

@@ -3,7 +3,6 @@
   "include": ["src"],
   "exclude": ["node_modules"],
   "compilerOptions": {
-    "outDir": "dist",
     "lib": ["dom", "es2017"]
   },
   "typeRoots": ["./src", "./node_modules/@types"]