fix: webpack import issue

ducksoupdev · ducksoupdev · commit 7da9206340b9 · 2020-10-07T06:02:51.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.1] - 2020-10-07
+
+### Fixed
+- Issue with webpack import statements
+
 ## [1.0.0] - 2020-10-06
 
 - Initial release
diff --git a/dist/script.js b/dist/script.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "ficusjs-script",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "FicusJS script is a loader for ES modules and ES5 Javascript",
   "main": "dist/script.js",
   "module": "dist/script.js",
   "types": "types/script.d.ts",
   "scripts": {
     "build": "rollup -i src/script.js -o dist/script.js -f es -p \"terser={mangle: { keep_fnames: true, toplevel: true, module: true }}\"",
+    "postbuild": "replace-in-file \"import(r)\" \"import(/* webpackIgnore: true*/r)\" dist/script.js",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "dev": "run-p serve open",
@@ -22,6 +23,7 @@
     "http-server": "0.12.3",
     "npm-run-all": "4.1.5",
     "open-cli": "6.0.1",
+    "replace-in-file": "6.1.0",
     "rollup": "2.28.2",
     "rollup-plugin-terser": "7.0.2",
     "standard": "14.3.4",
diff --git a/site/app/src/docs/getting-started.md b/site/app/src/docs/getting-started.md
@@ -9,61 +9,33 @@ The easiest way to try out FicusJS script loader is using a simple example.
 Create an `index.html` file and copy the following between the `<body>` tags.
 
 ```html
-<top-nav></top-nav>
-<div id="router-outlet"></div>
+<div id="content"></div>
 
 <script type="module">
-import { createRouter } from 'https://unpkg.com/ficusjs-router?module'
-import { createComponent } from 'https://unpkg.com/ficusjs?module'
-import { render as renderer, html } from 'https://unpkg.com/lit-html?module'
-
-createComponent('home-page', {
-  renderer,
-  render () {
-    return html`<div>Welcome to the home page!</div>`
-  }
-})
-
-createComponent('page-one', {
-  renderer,
-  render () {
-    return html`<div>Welcome to the page one!</div>`
-  }
-})
-
-createComponent('page-two', {
-  renderer,
-  render () {
-    return html`<div>Welcome to the page two!</div>`
-  }
-})
-
-const router = createRouter([
-  { path: '', component: 'home-page' },
-  { path: '/one', component: 'page-one' },
-  { path: '/two', component: 'page-two' }
-], '#router-outlet', { mode: 'hash' })
-
-createComponent('top-nav', {
-  renderer,
-  navigateTo (path) {
-    router.push(path)
-  },
-  render () {
-    return html`
-      <nav>
-        <ul>
-          <li><button type="button" @click="${() => this.navigateTo('/')}">Home</button></li>
-          <li><button type="button" @click="${() => this.navigateTo('/one')}">Page one</button></li>
-          <li><button type="button" @click="${() => this.navigateTo('/two')}">Page two</button></li>
-        </ul>
-      </nav>
-    `
-  }
-})
+import { loadScript } from 'https://unpkg.com/ficusjs-script?module'
+const markdownToRender = `# FicusJS script loader
+
+Dynamically load ES modules and ES5 scripts.
+
+- Lazy load ES modules
+- Lazy load ES5 scripts
+- Dynamically load based on path
+- Functional programming patterns
+- Small footprint (1.3 KB gzipped for everything!)
+- No dependencies
+- Works with client-side frameworks
+`
+
+// load the ES module for marked
+loadScript('https://unpkg.com/marked@1.2.0/lib/marked.esm.js')
+  .then(mod => mod.default)
+  .then(marked => {
+    const content = document.getElementById('content')
+    content.innerHTML = marked(markdownToRender)
+  })
 </script>
 ```
 
-> Alternatively, fork this Codepen to see it in action - [https://codepen.io/ducksoupdev/pen/PoNvGwK](https://codepen.io/ducksoupdev/pen/PoNvGwK)
+> Alternatively, fork this Codepen to see it in action - [https://codepen.io/ducksoupdev/pen/abZbdbq](https://codepen.io/ducksoupdev/pen/abZbdbq)
 
 The example creates a set of page components, a page navigation component and a new router using hash mode.
diff --git a/site/app/src/index.html b/site/app/src/index.html
@@ -52,9 +52,9 @@ <h1 class="hero__title">
       <p class="hero__description">Lightweight script loader for lazy loading ES modules and ES5 scripts or both based on dynamic paths</p>
     </div>
     <div class="hero__terminal">
-      <p class="codepen" data-height="320" data-theme-id="dark" data-default-tab="html,result" data-user="ducksoupdev" data-slug-hash="PoNvGwK" style="height: 320px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="FicusJS router example">
-  <span>See the Pen <a href="https://codepen.io/ducksoupdev/pen/PoNvGwK">
-  FicusJS router example</a> by Matt Levy (<a href="https://codepen.io/ducksoupdev">@ducksoupdev</a>)
+      <p class="codepen" data-height="320" data-theme-id="dark" data-default-tab="html,result" data-user="ducksoupdev" data-slug-hash="abZbdbq" style="height: 320px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="FicusJS script loader example">
+  <span>See the Pen <a href="https://codepen.io/ducksoupdev/pen/abZbdbq">
+  FicusJS script loader example</a> by Matt Levy (<a href="https://codepen.io/ducksoupdev">@ducksoupdev</a>)
   on <a href="https://codepen.io">CodePen</a>.</span>
       </p>
       <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
