fix(Build): Fix build issues due to circular dependencies

stencila · Dec 4, 2019 · 4d7c13e · 4d7c13e
1 parent 3a04a53
commit 4d7c13e
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -7,10 +7,10 @@
   ],
   "main": "./dist/index.js",
   "scripts": {
-    "dev": "parcel ./src/demo/index.html --open",
+    "dev": "parcel ./src/index.html ./src/examples/*.html --open",
     "build": "parcel build ./src/*.ts ./src/{common,themes}/**/*.{css,ts} && tsc --emitDeclarationOnly",
     "watch": "parcel watch ./src/**/*.css ./src/**/*.ts",
-    "pages": "parcel build ./src/demo/index.html -d pages  --public-url .",
+    "pages": "parcel build ./src/index.html ./src/examples/*.html -d pages --public-url .",
     "pages:test": "parcel build ./src/examples/*.html -d test/examples --public-url .",
     "clean": "rm -rf .cache dist pages test/examples",
     "semantic-release": "semantic-release",

diff --git a/src/demo/index.ts b/src/demo/index.ts
@@ -9,7 +9,7 @@
  * content for all examples and all themes i.e. it is not truly lazy.
  *
  * For CSS, this `import()` approach did not work, maybe because it loads all the
- * CSS stylesheets into the global DOM. So, we take the approach of enablig/diabling `<link>`
+ * CSS stylesheets into the global DOM. So, we take the approach of enabling/disabling `<link>`
  * elements.
  */
 
@@ -37,8 +37,10 @@ const contentSet = async (example: string): Promise<void> => {
   window.sessionStorage.setItem(sessionKey.ARTICLE, example)
 
   // Load the HTML content
-  const content = await examples[example]
-  const html = content.default
+  const req = new XMLHttpRequest()
+  req.open('GET', `./${examples[example]}`, false)
+  req.send(null)
+  const html = req.responseText
 
   // Set the content of `<main>` to the content of the example `<body>`
   const dom = new DOMParser().parseFromString(html, 'text/html')

diff --git a/src/examples/index.ts b/src/examples/index.ts
@@ -1,10 +1,6 @@
-export const examples: {[key: string]: Promise<any>} = {
-  // @ts-ignore
-  'simple': import('./simple.html'),
-  // @ts-ignore
-  'article-antibodies': import('./article-antibodies.html'),
-  // @ts-ignore
-  'article-drosophila': import('./article-drosophila.html'),
-  // @ts-ignore
-  'article-rmarkdown': import('./article-rmarkdown.html')
+export const examples: { [key: string]: string } = {
+  simple: '/examples/simple.html',
+  'article-antibodies': '/examples/article-antibodies.html',
+  'article-drosophila': '/examples/article-drosophila.html',
+  'article-rmarkdown': '/examples/article-rmarkdown.html'
 }
diff --git a/src/demo/index.html → src/index.html b/src/demo/index.html → src/index.html
@@ -5,33 +5,33 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="./demo/styles.css" />
     <link
       class="theme"
       id="elife"
       rel="stylesheet"
-      href="../themes/eLife/styles.css"
+      href="./themes/eLife/styles.css"
       disabled
     />
     <link
       class="theme"
       id="nature"
       rel="stylesheet"
-      href="../themes/nature/styles.css"
+      href="./themes/nature/styles.css"
       disabled
     />
     <link
       class="theme"
       id="plos"
       rel="stylesheet"
-      href="../themes/plos/styles.css"
+      href="./themes/plos/styles.css"
       disabled
     />
     <link
       class="theme"
       id="stencila"
       rel="stylesheet"
-      href="../themes/stencila/styles.css"
+      href="./themes/stencila/styles.css"
     />
     <script
       src="https://unpkg.com/@stencila/components@&lt;=1/dist/stencila-components/stencila-components.esm.js"
@@ -68,6 +68,6 @@
       </label>
     </header>
     <main></main>
-    <script src="index.ts"></script>
+    <script src="./demo/index.ts"></script>
   </body>
 </html>
diff --git a/src/themes/eLife/index.ts b/src/themes/eLife/index.ts
@@ -1 +1,4 @@
-export { load } from '../../common/js/index'
+import { load } from '../../common/js'
+export { load } from '../../common/js'
+
+load()
diff --git a/src/themes/index.ts b/src/themes/index.ts
@@ -1,8 +1,8 @@
 import { Themes } from '..'
 
-export const modules: {[key in keyof Themes]: Promise<any>} = {
+export const modules: { [key in keyof Themes]: Promise<any> } = {
   elife: import('./eLife'),
-  nature: import('./nature') ,
+  nature: import('./nature'),
   plos: import('./plos'),
   stencila: import('./stencila')
 }
diff --git a/src/themes/nature/index.ts b/src/themes/nature/index.ts
@@ -1 +1,4 @@
-export { load } from '../../common/js/index'
+import { load } from '../../common/js'
+export { load } from '../../common/js'
+
+load()
diff --git a/src/themes/plos/index.ts b/src/themes/plos/index.ts
@@ -1,5 +1,3 @@
-import '../../common/js/index'
-
 export const init = (): void => {
   const referenceListItemSel = '[itemprop="references"] > li'
   const datePublishedSel = '[itemprop="datePublished"]'

diff --git a/src/themes/stencila/index.ts b/src/themes/stencila/index.ts
@@ -1,3 +1,3 @@
-import { load } from '../../common/js/index'
+import { load } from '../../common/js'
 
 load()