feat: add react-at & fix loadJsForceUmd deps

public/code/index.yml

@@ -1,4 +1,5 @@
 - hello-world.jsx
+- react-at.jsx
 - vue-at.js
 - vue-render-h.js
 - vue-string-template.js

public/code/react-at.jsx

@@ -0,0 +1,35 @@
+//// hack for current version of react-at
+await loadJs('https://unpkg.com/[email protected]/prop-types.min.js')
+React.PropTypes = PropTypes
+
+// await loadJs('https://unpkg.com/react-at')
+await loadJsForceUmd({
+  url: 'https://unpkg.com/[email protected]/dist/index.js',
+  name: 'ReactAt',
+  deps: { react: 'React' },
+})
+////
+
+let { default: At } = ReactAt
+
+appendCss(`
+.editor { margin-top:20px; padding:4px 8px; height:120px; border:solid 1px gray; white-space:pre-wrap }
+`)
+
+let members = ['fritx', 'linguokang', 'huangruichang']
+
+let App = () => {
+  return (
+    <div style={{ padding: 20 }}>
+      <h1>react-at</h1>
+      <a target="_blank" href="https://github.com/fritx/react-at">
+        https://github.com/fritx/react-at
+      </a>
+      <At members={members}>
+        <div style={{ height: 100 }}>
+          <div class="editor" contentEditable>@fritx @huangruichang&nbsp;</div>
+        </div>
+      </At>
+    </div>
+  )
+}

public/code/react-editor-sizing.jsx

@@ -7,7 +7,6 @@ let { DragSizing } = ReactDragSizing
 let MyCard = styled.div`
   margin-top: 20px;
 `
-
 let MyEditor = styled(Editor)`
   border: solid 1px gray; padding: 4px 10px; overflow: auto;
 `
@@ -16,6 +15,9 @@ let App = () => {
   return (
     <div style={{ padding: 20 }}>
       <h1>react-editor-sizing</h1>
+      <a target="_blank" href="https://github.com/fritx/react-drag-sizing">
+        https://github.com/fritx/react-drag-sizing
+      </a>
 
       <MyCard>
         <DragSizing border="bottom" style={{ minHeight: 32, height: 100 }}>

public/code/react-editor.jsx

@@ -5,7 +5,6 @@ let { Editor } = ReactEditor
 let MyCard = styled.div`
   margin-top: 20px;
 `
-
 let MyEditor = styled(Editor)`
   border: solid 1px gray; padding: 4px 10px; overflow: auto;
 `
@@ -14,6 +13,9 @@ let App = () => {
   return (
     <div style={{ padding: 20 }}>
       <h1>react-editor</h1>
+      <a target="_blank" href="https://github.com/fritx/react-editor">
+        https://github.com/fritx/react-editor
+      </a>
 
       <MyCard>
         <div style={{ height: 100 }}>

public/code/vue-at.js

@@ -5,7 +5,6 @@ await loadJs('https://unpkg.com/[email protected]/dist/vue.min.js')
 await loadJsForceUmd({
   url: 'https://unpkg.com/[email protected]/dist/vue-at.js',
   name: 'VueAt',
-  deps: { vue: Vue },
 })
 
 appendCss(`
@@ -18,6 +17,9 @@ let App = {
   template: `
     <div class="container">
       <h1>Vue At</h1>
+      <a target="_blank" href="https://github.com/fritx/vue-at">
+        https://github.com/fritx/vue-at
+      </a>
       <at :members="members" v-model="input">
         <div class="editor" contenteditable></div>
       </at>

src/playground/util.tsx

@@ -29,7 +29,7 @@ export let loadJsForceUmd = async ({
       let module = { exports: {} }
       let require = k => {
         ${Object.keys(deps)
-          .map(k => `if (k === ${k}) return ${deps[k]}`)
+          .map(k => `if (k === ${JSON.stringify(k)}) return ${deps[k]}`)
           .join('\n')}
         throw new Error(\`module '\${k}' not found\`)
       }