first Beta release

Json dom styled counting input fix console fix doc done cell modification fix
rajatsandeepsen · May 2, 2023 · 4db6a77 · 4db6a77 · vercel · May 2, 2023
2 parents 6eca57b + a8cbbfd
commit 4db6a77
Show file tree

Hide file tree

Showing 18 changed files with 522 additions and 251 deletions.
diff --git a/README.md b/README.md
@@ -1,47 +1,27 @@
-# scripter
-i hate python, so i build a jupyter notebook for javascript
-
-
-https://stackoverflow.com/questions/1340872/how-to-get-javascript-caller-function-line-number-and-caller-source-url/37081135#37081135
-
-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
-
-https://github.com/WebDevSimplified/React-CodePen-Clone/tree/master
-
-
-```
-var regex = /\((.*?)\)/;
-    let x =1
-	var strToMatch = `console.log(x + 1)`
-	var matched = regex.exec(strToMatch);
-	console.log(eval(matched[1]))
-	eval(strToMatch)
-```
-
-
 ```
-console.stdlog = console.log.bind(console);
-console.logs = [];
-console.log = function(){
-    console.logs.push(Array.from(arguments));
-    console.stdlog.apply(console, arguments);
+import type { User } from '../interfaces'
+import useSwr from 'swr'
+import Link from 'next/link'
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
+
+export default function Index() {
+  const { data, error, isLoading } = useSwr<User[]>('/api/users', fetcher)
+
+  if (error) return <div>Failed to load users</div>
+  if (isLoading) return <div>Loading...</div>
+  if (!data) return null
+
+  return (
+    <ul>
+      {data.map((user) => (
+        <li key={user.id}>
+          <Link href="/user/[id]" as={`/user/${user.id}`}>
+            {user.name ?? `User ${user.id}`}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
 }
-```
-
-```
-
-	
-	// js = js.replace("console.log", "alert");
-
-	// var regex = /\((.*?)\)/;
-	// var strToMatch = "This is a test string (more or less)";
-	// var matched = regex.exec(strToMatch);
-	// console.log(matched[1]);
-
-	// var content = template(jsEditor.value);
-```
-
-
-```
-onInput={()=>hljs.highlightAll()}
 ```
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
 </head>
 <body>
 	<header>
-		<h1>Scripter</h1>
+		<h1 data-language=json>Scripter</h1>
 	</header>
 	<main>
 		<div class="editor">
@@ -17,6 +17,11 @@ <h1>Scripter</h1>
 			</div>
 		</div>
 	</main>
-	<script src="/script.js"></script>
+	<script src="/script.js">
+		let x = document.querySelector('[data-language=json]').innerText
+		// console.log(JSON.parse(domData))
+		console.log(x)
+
+	</script>
 </body>
 </html>
diff --git a/scripter/README.md b/scripter/README.md
@@ -1,38 +1,4 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
 ```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+let domData = document.querySelectorAll('[data-language=json]')[0].innerText
+console.log(JSON.parse(domData))
+ ```
diff --git a/scripter/package-lock.json b/scripter/package-lock.json
diff --git a/scripter/package.json b/scripter/package.json
@@ -21,6 +21,8 @@
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "sass": "^1.59.3"
+    "sass": "^1.59.3",
+    "swr": "^2.1.5",
+    "uuid": "^9.0.0"
   }
 }
diff --git a/scripter/public/scripter.svg b/scripter/public/scripter.svg
diff --git a/scripter/src/components/codemirror.js b/scripter/src/components/codemirror.js
@@ -2,20 +2,27 @@ import styles from '@/styles/Home.module.scss'
 import CodeMirror from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { githubDark } from '@uiw/codemirror-theme-github';
-import { useEffect, useState, useRef } from 'react'
-import { consoleTemplate, inputTemplate } from '@/functions/input';
+import { useState, useRef } from 'react'
+import { consoleTemplate, inputTemplate, sharedJsonDom } from '@/functions/input';
+
+export default function Codespace({index, data, func}) {
+    const {init, output, cellID} = data
+    const {deleteFunc, clearFunc} = func
+
 
-export default function Codespace({data}) {
-    const {init, name, output} = data
     const [codes, setCodes] = useState(init)
     const [result, setResult ] = useState(output)
+    const [isRunning, setRunning] = useState(false)
+
+
     const compute = useRef()
-    // const print = useRef()
-    const id = name
-
+    const noOfTimes = useRef(0)
+    const id = cellID
 
     compute.current = () => {    
-      let runable = consoleTemplate(id) + inputTemplate() + codes
+      setRunning(true)
+      noOfTimes.current += 1
+      let runable = consoleTemplate(id) + inputTemplate() + sharedJsonDom() + codes
       console.log(runable)
       document.getElementById(id + 'result').innerHTML = ''
       try { new Function(runable)() }
@@ -24,6 +31,8 @@ export default function Codespace({data}) {
       }
       finally { 
         setResult(document.getElementById(id + 'result').innerHTML)
+        setTimeout(()=> setRunning(false), 1000)
+
       }
     }
 
@@ -34,24 +43,36 @@ export default function Codespace({data}) {
         }
     }
 
+
   return (
         <section className='d-flex flex-column align-items-center w-100 gap-3'>
-          <div id={id} onKeyDown={callRefCompute} className={styles.codespace} tabIndex="0">
+          <div id={id} onKeyDown={callRefCompute} 
+               className={styles.codespace} 
+               data-running={isRunning ? '✱' : noOfTimes.current} 
+               tabIndex="0">
+
             <CodeMirror
             value={codes}
-            height='200'
+            min-height='200px'
             theme={githubDark}
             extensions={[javascript({ jsx: true })]}
-            onChange={(value) => setCodes(value)}
-            />
+            onChange={(value) => setCodes(value)}/>
+
             <ul>
-                {/*<button className={styles.Button} >Code <i className="bi bi-code"/></button>*/}
-                {/*<button className={styles.Button} >Markdown <i className="bi bi-pen"/></button>*/}
-                <button onClick={compute.current} className={styles.Button}>Run <i className="bi bi-gear"/></button>
+                {/*<button title='del' onClick={()=> deleteFunc(index)} className={styles.Button}>
+                  Cell <i className="bi bi-trash-fill"/>
+                </button>
+                <button title='ctrl + backspace' onClick={()=> clearFunc(index)} className={styles.Button}>
+                  Clear <i className="bi bi-eraser-fill"/>
+                </button>*/}
+                <button disabled={isRunning} title='Shift + Enter' onClick={compute.current} className={`${styles.Button} ${"runButton"}`}>
+                  { isRunning ? 
+                                <span className='d-flex gap-1 align-items-center'>Executing <i className='spinner-border spinner-border-sm'></i></span> 
+                              : <span className='d-flex gap-1 align-items-center'>Run <i className="bi bi-gear-fill"/></span> }
+                </button>
             </ul>
           </div>
-          <code id={id + 'result'} className={styles.results} dangerouslySetInnerHTML={{__html : result === ''? '' : result}}>
-          </code>
+          <code id={id + 'result'} className={styles.results} dangerouslySetInnerHTML={{__html : result === ''? '' : result}} />
         </section>
   )
 }
diff --git a/scripter/src/components/codespace.js b/scripter/src/components/codespace.js
@@ -0,0 +1,68 @@
+import Codespace from '@/components/codemirror'
+import { useEffect, useImperativeHandle,forwardRef, useState } from 'react'
+import useSwr from 'swr'
+import styles from '@/styles/Home.module.scss'
+
+function removeElementAtIndex(arr, index) {
+    if (index < 0 || index >= arr.length) {
+      throw new Error('Index out of bounds');
+    }
+    const newArr = [...arr];
+    newArr.splice(index, 1);
+    return newArr;
+  }
+
+
+const fetcher = (url) => fetch(url).then((res) => res.json())
+const CodeSpaceContainer = forwardRef((props, ref) => {
+    const fileName = props.fileName
+    const {data: code, error: codeError, isLoading: codeLoading} = useSwr(`api/code/${fileName}`, fetcher)
+    const [cells, setCells] = useState([])
+
+
+    useImperativeHandle(ref, () => ({
+        deleteAllCell: () => setCells([])
+    }))
+
+    useEffect(() => {
+        if (code) setCells(() => code)
+    }, [code]);
+
+    if (codeError) return <p>Failed to Load</p>
+    if (codeLoading) return <div className="spinner-border text-white m-auto" role="status"><span className="sr-only"></span></div>
+
+
+
+    function newCell(){
+        const x = {
+            init: '// start coding here',
+            output: ''
+        }
+        setCells((cells) => [...cells, x])
+    }
+    const deleteCell = (index) => setCells(cells.filter((value, arrIndex) => index !== arrIndex))
+    const  clearCell = (index) => setCells((cells) => cells.map((cell, arrIndex) => index === arrIndex ? {output:' ', init: ' '} : cell ))
+
+    return (
+        <>
+        {cells.length > 0? 
+                           cells.map((eachCell, i)=>(<Codespace key={i} index={i} data={eachCell} func={{deleteFunc:deleteCell, clearFunc: clearCell}} />)) 
+                         : <span className='d-flex flex-column align-items-center'><p className='text-white-50'>Create new cell to start coding</p>
+                            <i className="bi bi-arrow-down text-white-50"/></span>
+        }
+        <ul className='d-flex gap-3'>
+          <button onClick={newCell} className={styles.Button}>
+            Add Cell <i className="bi bi-plus-square-fill"></i>
+          </button>
+          <button  disabled className={styles.Button}>
+            Markdown <i className="bi bi-hash"></i>
+          </button>
+          <button disabled  className={styles.Button}>
+            Web Builder <i className="bi bi-filetype-html"></i>
+          </button>
+        </ul>
+        </>
+        )
+})
+
+export default CodeSpaceContainer;