feat: add react-at & fix loadJsForceUmd deps

fritx · fritx · commit 48b0ee785448 · 2020-04-19T13:46:44.000+08:00
diff --git a/public/code/index.yml b/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
diff --git a/public/code/react-at.jsx b/public/code/react-at.jsx
@@ -0,0 +1,35 @@
+//// hack for current version of react-at
+await loadJs('https://unpkg.com/prop-types@15.6.2/prop-types.min.js')
+React.PropTypes = PropTypes
+
+// await loadJs('https://unpkg.com/react-at')
+await loadJsForceUmd({
+  url: 'https://unpkg.com/react-at@0.1.0/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>
+  )
+}
diff --git a/public/code/react-at.jsx.png b/public/code/react-at.jsx.png
diff --git a/public/code/react-editor-sizing.jsx b/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 }}>
diff --git a/public/code/react-editor.jsx b/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 }}>
diff --git a/public/code/vue-at.js b/public/code/vue-at.js
@@ -5,7 +5,6 @@ await loadJs('https://unpkg.com/vue@2.6.11/dist/vue.min.js')
 await loadJsForceUmd({
   url: 'https://unpkg.com/vue-at@2.5.0-beta.2/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>
diff --git a/src/playground/util.tsx b/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\`)
       }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`- hello-world.jsx`
	`2`	`+- react-at.jsx`
`2`	`3`	`- vue-at.js`
`3`	`4`	`- vue-render-h.js`
`4`	`5`	`- vue-string-template.js`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export let loadJsForceUmd = async ({`
`29`	`29`	`let module = { exports: {} }`
`30`	`30`	`let require = k => {`
`31`	`31`	`${Object.keys(deps)`
`32`		- .map(k => `if (k === ${k}) return ${deps[k]}`)
	`32`	+ .map(k => `if (k === ${JSON.stringify(k)}) return ${deps[k]}`)
`33`	`33`	`.join('\n')}`
`34`	`34`	throw new Error(\`module '\${k}' not found\`)
`35`	`35`	`}`