Refine exports and add readme (#21)

* Refine exports and add readme

* update readme

README.md

@@ -1 +1,51 @@
 # devjar
+> bundless runtime for your ESM JavaScript project in browser
+
+
+![image](https://repository-images.githubusercontent.com/483779830/23b4d7c8-dd8e-48b0-a3ea-c519e8236714)
+
+### Install
+
+```sh
+yarn add devjar
+```
+
+### Usage
+
+```js
+import { useLiveCode } from 'devjar'
+
+function Playground() {
+  const { ref, error, load } = useLiveCode({
+    getModulePath(modPath) {
+      return `https://cdn.skypack.dev/${modPath}`
+    }
+  })
+
+  // logging failures
+  if (error) {
+    console.error(error)
+  }
+
+  // load code files and execute them as live code
+  function run() {
+    load({
+      'index.js': `export default function Main() { return 'hello world' }`,
+      './mod': `...` // other relative modules
+    })
+  }
+
+  // Attach the ref to an iframe element for runtime of code execution
+  return (
+    <div>
+      <button onClick={run}>run</h3>
+      <iframe ref={ref} />
+    </div>
+  )
+}
+```
+
+### License
+
+The MIT License (MIT).
+

docs/pages/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react'
 import { debounce } from 'lodash-es'
 import { Editor } from 'codice'
-import { useLiveCode } from 'devjar/react'
+import { useLiveCode } from 'devjar'
 import { highlight } from 'sugar-high'
 
 export default function Page() {
@@ -45,29 +45,41 @@ export default function Name() {
   return (
     <div>
       <div>
-        <h3>Code</h3>
-        {Object.keys(files).map((filename) => (
+        <h1>Devjar</h1>
+        <p>Bundless runtime for your ESM JavaScript project in browser.</p>
+        <br />
+      </div>
+
+      <div>
+        <h3>Code Editor</h3>
+        <div className='filetree'>
+          <div>
+            {Object.keys(files).map((filename) => (
+              <button
+                key={filename}
+                disabled={filename === activeFile}
+                className={'filetab filetab--' + (filename === activeFile ? 'active' : '')}
+                onClick={() => setActiveFile(filename)}
+              >
+                {filename + (filename.endsWith('.js') ? '' : '.js')}
+              </button>
+            ))}
+          </div>
           <button
-            key={filename}
-            disabled={filename === activeFile}
-            onClick={() => setActiveFile(filename)}
+            className='filetab filetab--new'
+            onClick={() => {
+              const modId = Object.keys(files).length
+              const newFilename = './mod' + modId
+              setFiles({
+                ...files,
+                [newFilename]: `export default function Mod${modId}() {}`,
+              })
+              setActiveFile(newFilename)
+            }}
           >
-            {filename}
+            {`+ new`}
           </button>
-        ))}
-        <button
-          onClick={() => {
-            const modId = Object.keys(files).length
-            const newFilename = './mod' + modId
-            setFiles({
-              ...files,
-              [newFilename]: `export default function Mod${modId}() {}`,
-            })
-            setActiveFile(newFilename)
-          }}
-        >
-          +
-        </button>
+        </div>
         <Editor
           highlight={highlight}
           className='editor'

docs/styles.css

@@ -9,7 +9,6 @@ html {
 body {
   max-width: 690px;
   margin: auto;
-  padding: 40px 10px 40px;
 }
 :root {
   --sh-class: #2d5e9d;
@@ -35,30 +34,34 @@ body {
 }
 .editor {
   position: relative;
-  height: 200px;
+  max-height: 200px;
   display: flex;
-  overflow-y: hidden;
-  margin-top: 20px;
+  overflow-y: scroll;
+  justify-content: stretch;
+  flex-direction: column;
 }
 pre {
   width: 100%;
 }
 pre, textarea, .preview {
   font-family: Consolas, Monaco, monospace;
-  padding: 16px 12px;
+  padding: 8px 12px;
   background-color: #f6f6f6;
   border: none;
-  border-radius: 12px;
   font-size: 16px;
   line-height: 1.25em;
   caret-color: #333;
 }
 textarea {
   padding-left: 54px;
-  overflow-y: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 code {
-  padding: 16px 12px;
+  padding: 8px 12px;
   counter-reset: sh-line-number;
   overflow-y: auto;
   height: 100%;
@@ -78,4 +81,35 @@ code {
   width: 100%;
   border: 2px solid #bbb;
   background: #fefefe;
+}
+.filetree {
+  position: relative;
+  padding-right: 60px;
+}
+.filetree > div {
+  font-size: 0; /* remove spaces */
+}
+.filetab {
+  border: none;
+  background-color: #e9e9e9;
+  border: 1px solid #e9e9e9;
+  margin-left: 4px;
+  margin-bottom: 4px;
+}
+.filetab--active {
+  background-color: #d4d6d8;
+  color: #333;
+  font-weight: 600;
+  border: 1px solid #333;
+}
+.filetab--new {
+  background-color: #7b838f;
+  border: 1px solid #7b838f;
+  color: #fff;
+  margin-left: 20px;
+}
+.filetree .filetab--new {
+  position: absolute;
+  right: 0;
+  top: 0;
 }

lib/core.mjs

@@ -0,0 +1,46 @@
+async function createModule(files, { getModulePath }) {
+  let currentImportMap
+  let shim
+
+  async function setupImportMap() {
+    if (shim) return shim
+    window.esmsInitOptions = {
+      shimMode: true,
+      mapOverrides: true,
+    }
+    shim = import(/* webpackIgnore: true */ getModulePath('es-module-shims'))
+    await shim
+  }
+
+  function updateImportMap(imports) {
+    imports['react'] = getModulePath('react')
+    imports['react-dom'] = getModulePath('react-dom')
+
+    const script = document.createElement('script')
+    script.type = 'importmap-shim'
+    script.innerHTML = JSON.stringify({ imports })
+    document.body.appendChild(script)
+    if (currentImportMap) {
+      currentImportMap.parentNode.removeChild(currentImportMap)
+    }
+    currentImportMap = script
+  }
+
+
+  function createInlinedModule(code) {
+    return `data:text/javascript;utf-8,${encodeURIComponent(code)}`
+  }
+
+  await setupImportMap()
+  const imports = Object.fromEntries(
+    Object.entries(files).map(([key, code]) => [
+      key,
+      createInlinedModule(code),
+    ])
+  )
+
+  updateImportMap(imports)
+  return self.importShim('index.js')
+}
+
+export { createModule }