editors testing, sync scroll, etc

hrgdavor · Aug 16, 2022 · d382449 · d382449
1 parent ecceee9
commit d382449
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 124 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -77,7 +77,8 @@ common/autoinstallers/*/.npmrc
 .history
 esm
 cjs
-
+deploy
+dist
 
 #-------------------------------------------------------------------------------------------------------------------
 # Prettier-specific overrides

diff --git a/apps/repl/.prettierrc b/apps/repl/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "semi": false,
+  "arrowParens": "avoid",
+  "printWidth": 110,
+
+  "endOfLine": "auto",
+
+  "singleQuote": true,
+
+  "trailingComma": "all"
+}
diff --git a/apps/repl/editor.css b/apps/repl/editor.css
@@ -7,9 +7,15 @@ body, html{
 }
 
 .c-iframe{
-  width:300px;
-  height:300px;
   position: relative;
   border: solid 1px red;
 }
 
+.c-left {
+  width: 300px;
+}
+
+.c-main{
+  display: grid;
+  grid-template-columns: minmax(25%, 300px) auto;
+}
diff --git a/apps/repl/editor.html b/apps/repl/editor.html
@@ -6,8 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jsx6 App Monaco editor</title>
   </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/editor.jsx"></script>
+  <body class="fxs1">
   </body>
-</html>
+  </html>
+  <script type="module" src="/editor.jsx"></script>
diff --git a/apps/repl/editor.jsx b/apps/repl/editor.jsx
@@ -4,39 +4,100 @@
 import { appendChild, domWithScope, insertBefore, Jsx6, setVisible } from '@jsx6/jsx6'
 import { FlipFrame } from './src/FlipFrame'
 import { transform } from './src/transform'
+import { MonacoEditor } from './src/MonacoEditor'
 
 import styles from './editor.css'
 
-class Editor extends Jsx6{
+class Editor extends Jsx6 {
+  init() {
+    this.compiled.editor.updateOptions({ readOnly: true })
+    function syncScroll(ed1, ed2) {
+      ed1.onDidScrollChange(e => ed2.setScrollTop(e.scrollTop))
+      ed2.onDidScrollChange(e => ed1.setScrollTop(e.scrollTop))
+    }
+    syncScroll(this.editor.editor, this.compiled.editor)
+  }
+
+  tpl(h, state, $state) {
+    return (
+      <>
+        <div class="fx1 c-main owh">
+          {/* ---------------- left side  ----------------------- */}
+          <div class="c-left fx1 pad owh">
+            <h1>Title</h1>
+            <p>Bla bla</p>
+          </div>
+
+          {/* ---------------- right side  ----------------------- */}
+          <div class="fxs fxfc owh">
+            {/* right top */}
+            <div class="fxs1 owh">
+              <MonacoEditor p="editor" class="fx1 owh" />
+              <MonacoEditor p="compiled" class="fx1 owh" />
+            </div>
 
-  tpl(h, state, $state){
-    return <>
-      <FlipFrame p="iframe" class="c-iframe"/>
-    </>
+            {/* right bottom */}
+            <div class="fxs1 fxfc owh">
+              <div class="fxs1 owh">
+                <FlipFrame p="iframe" class="fx1" hidden />
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    )
   }
 }
 
-const editor = self.APP = insertBefore(document.body,<Editor/>)
+const editor = (self.APP = insertBefore(document.body, <Editor class="fxs1" />))
 
-self.doTest2 = ()=>{
+self.doTest2 = () => {
   let time = performance.now()
   APP.iframe.counter = (APP.iframe.counter || 0) + 1
-  APP.iframe.waitNext().then(iframe=>{
+  APP.iframe.waitNext().then(iframe => {
     console.log('reloaded', performance.now() - time, iframe.__mark)
-    insertBefore(iframe.contentWindow.document.body,<h1>Hello iframe {iframe.loadCounter} / {APP.iframe.counter}</h1>)
-  });
+    insertBefore(
+      iframe.contentWindow.document.body,
+      <h1>
+        Hello iframe {iframe.loadCounter} / {APP.iframe.counter}
+      </h1>,
+    )
+  })
 }
-const code = `import { h, Jsx6, appendChild } from '@jsx6/jsx6'
- const hello2 = <div>Hello {name}!</div>
- const hello3 = <div>Hello {name}!</div>
- export const hello = <div>Hello {name}!</div>
-`
-// console.log(code)
-// console.log(transform(code, {}).code,)
-// console.log(transform(code, {},{plugins:['transform-modules-commonjs']}).code,)
+
+const code = `import { h, Jsx6, insertBefore } from '@jsx6/jsx6'
+
+insertBefore(document.body,<h3>Hello World!{/* comment in jsx*/}</h3>)
 
 
+console.log('aaaaa')
 
 
+console.log('aaaaa')
+`
+editor.editor.setValue(code)
+
+applyCodeChange(code)
+
+let changeTimer
+editor.editor.editor.getModel().onDidChangeContent(event => {
+  console.log('code change', event)
+  clearTimeout(changeTimer)
+  changeTimer = setTimeout(() => {
+    applyCodeChange(editor.editor.getValue())
+  }, 300)
+})
 
+function applyCodeChange(code) {
+  let time = performance.now()
+  const codeTransformed = transform(code, {}).code
+  let timeTransform1 = performance.now()
+  const codeToRun = transform(code, {}, { plugins: ['transform-modules-commonjs'] }).code
+  let timeTransform2 = performance.now()
+
+  editor.compiled.setValue(codeTransformed + '\n')
 
+  console.log(code)
+  console.log(timeTransform1 - time, codeTransformed)
+  console.log(timeTransform2 - time, codeToRun)
+}
diff --git a/apps/repl/index.jsx b/apps/repl/index.jsx
@@ -5,8 +5,11 @@ import { appendChild, insertBefore, insertHtml } from '@jsx6/jsx6'
 import { Editor } from './src/MonacoEditor'
 import './main.css'
 
-insertHtml(document.body,null,<b>Hello world.
-  <div style="width: 400px; height:400px; border: solid 1px" class="fxs">
-
-  </div>
-</b>)
+insertHtml(
+  document.body,
+  null,
+  <b>
+    Hello world.
+    <div style="width: 400px; height:400px; border: solid 1px" class="fxs"></div>
+  </b>,
+)
diff --git a/apps/repl/main.css b/apps/repl/main.css
@@ -2,29 +2,47 @@
 .bl{ display: block; }
 .bli{ display: inline-block; }
 
- /* flex */
+/* flex */
 .fx    { display: flex; }
 .fxi   { display: inline-flex; }
-.fx1   { flex: 1; }
+.fx1, .fxs1, .fxc1 { flex: 1; }
+.fx2 {flex: 2;} .fx3 {flex: 3;} .fx4 {flex: 4;} .fx5 {flex: 5;} .fx6 {flex: 6;}
+.fx7 {flex: 7;} .fx8 {flex: 8;} .fx9 {flex: 9;} .fx10 {flex: 10;} .fx11 {flex: 11;}  .fx12 {flex: 12;}
  /* default is row, so class for column is needed */
-.fx-fc { display: flex; flex-flow: column;}
- /* flex with everything stretched */
-.fxc { display: flex; justify-content: center; align-items: center;}
- /* flex with everything centered */
-.fxs { display: flex; justify-content: stretch; align-items: stretch;}
+.fxfc { display: flex; flex-flow: column;}
+
+ /* STRETCH flex with everything stretched (fxs1 is with flex:1) */
+.fxs, .fxs1 { display: flex; justify-content: stretch; align-items: stretch;}
+ /* CENTER flex with everything centered (fxc1 is with flex:1) */
+.fxc, .fxc1 { display: flex; justify-content: center; align-items: center;}
+
  /* flex justify tweaks */
-.fx-jc { justify-content: center; }
-.fx-ac { align-items: center; }
-.fx-js { justify-content: flex-start; }
-.fx-as { align-items: flex-start; }
-.fx-je { justify-content: flex-end; }
-.fx-ae { align-items: flex-end; }
-
-/* some very common sizes */
+.fxjc { justify-content: center; }
+.fxjs { justify-content: flex-start; }
+.fxje { justify-content: flex-end; }
+ /* flex justify tweaks */
+.fxsa { justify-content: space-around; }
+.fxsb { justify-content: space-between; }
+.fxse { justify-content: space-evenly; }
+
+ /* flex align tweaks */
+.fxac { align-items: center; }
+.fxas { align-items: flex-start; }
+.fxae { align-items: flex-end; }
+
+ /* SIZE ... very common sizes */
 .wa { width: auto; }
 .w100 { width: 100%; }
 .w50 { width: 50%; }
 .h100 { height: 100%; }
-/* often needed owerflow */
+.h50 { width: 50%; }
+
+ /* OVERFLOW common */
 .owh{ overflow: hidden;}
-.owa{ overflow: auto;}
+.owa{ overflow: auto;}
+
+
+/* PADIING */
+.pad{
+  padding: 20px; 
+}
diff --git a/apps/repl/src/FlipFrame.jsx b/apps/repl/src/FlipFrame.jsx
@@ -1,63 +1,60 @@
-import { Jsx6 } from '@jsx6/jsx6';
-import { Defered } from './async/Defered';
+import { Jsx6 } from '@jsx6/jsx6'
+import { Defered } from './async/Defered'
 
 export class FlipFrame extends Jsx6 {
   constructor(...args) {
     super(...args)
     const [attr] = args
     const iframeAttr = {
-      sandbox: attr?.sandbox || 'allow-same-origin', 
+      sandbox: attr?.sandbox || 'allow-same-origin',
       src: attr?.src || 'about:blank',
-      style: 'position:absolute; width:100%; height:100%; display:none; border:none'
+      style: 'position:absolute; width:100%; height:100%; display:none; border:none',
     }
-    this.iframes = [
-      h('iframe', iframeAttr),
-      h('iframe', iframeAttr),
-    ]
+    this.iframes = [h('iframe', iframeAttr), h('iframe', iframeAttr)]
     this.frameIndex = 0
   }
 
   reloadFrame(cb) {
-    cb(this.next());
+    cb(this.next())
   }
 
   waitNext() {
-    this.promise?.reject('skipped');
-    const next = this.next();
+    this.promise?.reject('skipped')
+    const next = this.next()
     if (next.__loading) {
-      this.promise = new Defered();
-      return this.promise.promise;
+      this.promise = new Defered()
+      return this.promise.promise
     } else {
-      return Promise.resolve(next);
+      return Promise.resolve(next)
     }
   }
 
   next() {
     const old = this.iframes[this.frameIndex]
     this.frameIndex = (this.frameIndex + 1) % this.iframes.length
     const next = this.iframes[this.frameIndex]
-    old.__loading = true;
-    old.contentWindow.document.location.reload();
+    old.__loading = true
+    old.contentWindow.document.location.reload()
     old.style.display = 'none'
     next.style.display = ''
-    return next;
+    return next
   }
 
   onload(evt) {
-    const iframe = evt.target;
-    evt.target.loadCounter = (evt.target.loadCounter || 0) + 1;
-    evt.target.__loading = false;
-    this.promise?.resolve(iframe);
-    this.promise = null;
+    const iframe = evt.target
+    evt.target.loadCounter = (evt.target.loadCounter || 0) + 1
+    evt.target.__loading = false
+    this.promise?.resolve(iframe)
+    this.promise = null
   }
 
-  tpl(){
+  tpl() {
     return this.iframes
   }
 
   init() {
-    this.iframes.forEach((iframe,i) =>{
-      iframe.onload = evt => this.onload(evt);
+    this.iframes.forEach((iframe, i) => {
+      iframe.onload = evt => this.onload(evt)
     })
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -77,7 +77,8 @@ common/autoinstallers/*/.npmrc @@
     .history
     esm
     cjs
+    deploy
+    dist
     #-------------------------------------------------------------------------------------------------------------------
     # Prettier-specific overrides
@@ Expand Down @@