refactor broser-exteionsion/source/react-lowcode

packages/browser-extension/source/Background/index.ts

@@ -1,6 +1,6 @@
 import "emoji-log"
 import { browser, Runtime } from "webextension-polyfill-ts"
-import { fetchLocalCode } from "../browser/fetchLocalCode"
+import { fetchLocalCode } from "../react-lowcode/devtools/fetchLocalCode"
 
 console.log("hello froom backgroundScript")
 

packages/browser-extension/source/DevToolScript/index.tsx

@@ -8,12 +8,12 @@ import { initLocalization } from "../localization/init";
 //@ts-ignore
 import {WCMonacoEditor} from './wcEditor'
 
-import { InspectedElementPayload } from '../devtools'
-import { cloneInspectedElement } from '../cloneInspectedElement'
+import { InspectedElementPayload } from '../react-lowcode/devtools'
+import { cloneInspectedElement } from '../react-lowcode/clone/inspected'
 
 console.log("[lowcode] devtools.js A");
 
-import { io, ioRefreshEditor } from '../util/global'
+import { io, ioRefreshEditor } from '../io/global'
 
 browser.devtools.panels
   .create("Lowcode", "/icon.png", "/devtools.html")
@@ -40,9 +40,9 @@ browser.devtools.panels
 
 
       if (msg?.type == 'lowcodeSources' && panelWindow) {
-        findLocaliozationFiles(msg?.path).then((foundFiles) => {
-          console.log('FOUND C', msg?.path, foundFiles)
-          const msgFiles = foundFiles.filter((file: string) => !file?.endsWith('/package.json') && !file?.endsWith('\\package.json'))
+        findLocaliozationFiles(msg.path, io).then((foundFiles) => {
+          console.log('FOUND C', msg.path, foundFiles)
+          const msgFiles = foundFiles.filter((file: string) => !file?.endsWith('/package.json') && !file?.endsWith('\\package.json')) // TODO exclude parameter in readDirectory
           initLocalization(msgFiles, panelWindow.document, io)
         })
       }

packages/browser-extension/source/InjectScript/index.test.ts

@@ -1,12 +1,14 @@
 import ts from "typescript"
-import fs from "fs"
 import {
   astFindSource,
-  jsxElementGetAttributes,
   startOfJsxIdentifier,
   startOfJsxNode,
-} from "../tsx/ast"
-import { findAttributeByName, isValidJsxElement } from "../util/routeHandlers"
+} from "../react-lowcode/ast/find"
+import {
+  jsxElementGetAttributes,
+} from "../react-lowcode/attributes"
+import { isValidJsxElement } from "../react-lowcode/routes/routeHandlers"
+import { findAttributeByName } from "../react-lowcode/attributes"
 
 import { APP_TXS_SAMPLE_CODE }  from './index.testdata'
 

packages/browser-extension/source/InjectScript/index.ts

@@ -1,4 +1,4 @@
-import { DevTools, DevToolsHook } from "../devtools"
+import { DevTools, DevToolsHook } from "../react-lowcode/devtools"
 
 console.log("helloworld from content script, som v contentscripte")
 

packages/browser-extension/source/io/cachefs.ts

@@ -1,5 +1,5 @@
-import { CodeRW } from './rw'
-import { CodeDir } from './dir'
+import { CodeRW } from '../react-lowcode/io/rw'
+import { CodeDir } from '../react-lowcode/io/dir'
 import { Noop } from './noop'
 
 export class CacheFS implements CodeRW, CodeDir {

packages/browser-extension/source/io/fetchfs.ts

@@ -1,10 +1,15 @@
 
-import { CodeRW } from './rw'
-import { CodeDir } from './dir'
-import { fetchLocalCode }  from '../browser/fetchLocalCode'
-import { readFile, writeFile, readDir } from "../util/fetch"
+import { CodeRW } from '../react-lowcode/io/rw'
+import { CodeDir } from '../react-lowcode/io/dir'
+import { fetchLocalCode }  from '../react-lowcode/devtools/fetchLocalCode'
+
+export class FetchFS implements CodeRW, CodeDir {
+    endpoint: string
+
+    constructor(endpoint: string) {
+        this.endpoint = endpoint
+    }
 
-export class FetchFS implements CodeRW, CodeDir  {
     async readFile(path: string): Promise<string | undefined> {
         if (path.startsWith("file://")) {
            const localRet = await fetchLocalCode(path)
@@ -13,15 +18,26 @@ export class FetchFS implements CodeRW, CodeDir  {
            }
         }
 
-        return readFile(path)
+        const res = await fetch(`${this.endpoint}/files/${path}`)
+        const code = await res.text()
+        return code
     }
 
-    writeFile(path: string, content: string): Promise<void> {
-        return writeFile(path, content)
+    async writeFile(path: string, content: string): Promise<void> {
+        await fetch(`${this.endpoint}/files/${path}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "text/plain",
+          },
+          body: content,
+        })
     }
 
-    readDirectory(path: string, /*extensions?: readonly string[], exclude?: readonly string[], include?: readonly string[], depth?: number*/): Promise<string[] | undefined> {
-        return readDir(path)
+    async readDirectory(path: string, extensions: readonly string[] = [], /*exclude?: readonly string[], include?: readonly string[], depth?: number*/): Promise<string[] | undefined> {
+        const queryString = [extensions.map((ext) => 'ext=' + encodeURI(ext)), 'depth=10'].join('&')
+        const res = await fetch(`${this.endpoint}/dir/${path}?${queryString}`)//extensions
+        const dir = await res.json()
+        return dir
     }
 
 }

packages/browser-extension/source/io/global.ts

@@ -0,0 +1,22 @@
+import { FetchFS, CacheFS } from '.'
+import { CodeRW } from '../react-lowcode/io/rw'
+
+// IMPORT THIS ONLY IN InjectScript/index.ts and DevToolScript.index.ts
+export const io = new CacheFS(new FetchFS('http://localhost:7500'))
+
+export const ioRefreshEditor = withWriteListener(io, (path: string/*, content: string*/) => {
+    console.log('written', path)
+})
+
+function withWriteListener(rw: CodeRW, listener: (path: string, content: string) => void): CodeRW {
+    return {
+        readFile(path: string, encoding?: string): Promise<string | undefined> {
+            return rw.readFile(path, encoding)
+        },
+        writeFile(path: string, content: string) {
+            return rw.writeFile(path, content).then(() => {
+                listener(path, content)
+            })
+        }
+    }
+}

packages/browser-extension/source/io/noop.ts

@@ -1,5 +1,5 @@
-import { CodeRW } from './rw'
-import { CodeDir } from './dir'
+import { CodeRW } from '../react-lowcode/io/rw'
+import { CodeDir } from '../react-lowcode/io/dir'
 
 export class Noop implements CodeRW, CodeDir {
     readFile(): Promise<string | undefined> {

packages/browser-extension/source/localization/init.ts

@@ -1,10 +1,10 @@
-import { createAst } from "../tsx/createSourceFile";
+import { createAst } from "../react-lowcode/ast/factory";
 import sk_SK from "../localization/sk_SK";
 import { addNewLocale, changeAllFiles, changeLocaleFile, combineLocales, createDynamicLocales, createTemporaryLocales, getLocaleFilesNames, getValuesFromLocalizationASTJSON, findLocaliozationFiles, saveAllLocalesFromTable, saveAllValuesAndParseBack, saveTableValuesAndParseBack, sendUpdatedFiles, updateFiles } from "../localization/localizations";
 import { createDynamicTable, createMultiTableWithMessages, createTableWithMessages } from "../localization/localeTables";
 import en_EN from "../localization/en_EN";
 import { ScriptTarget, ScriptKind } from "typescript";
-import { CodeRW } from '../io/rw'
+import { CodeRW } from '../react-lowcode/io/rw'
 
 export async function initLocalization(directory: string[], document: HTMLDocument, io: CodeRW) {
     console.log('initLocalization', directory, document, io)
@@ -14,7 +14,7 @@ export async function initLocalization(directory: string[], document: HTMLDocume
     //@ts-ignore
     const fileNames = getLocaleFilesNames(directory)
     console.log("FileNames", fileNames)
-    const temporary = await createTemporaryLocales(fileNames)
+    const temporary = await createTemporaryLocales(fileNames, io)
     console.log("Temporary", temporary)
     //@ts-ignore
     const dynamicLocales = createDynamicLocales(temporary)

packages/browser-extension/source/localization/localizations.test.ts

@@ -1,5 +1,5 @@
 import ts, { ScriptKind, ScriptTarget } from "typescript"
-import { createAst } from "../tsx/createSourceFile"
+import { createAst } from "../react-lowcode/ast/factory"
 import { changeLocaleFile, getValuesFromLocalizationASTJSON } from "./localizations"
 import sk_SK from "./sk_SK"
 

packages/browser-extension/source/localization/localizations.ts

@@ -1,12 +1,8 @@
 import { SourceFile, factory, ScriptKind, ScriptTarget, createSourceFile, Printer } from "typescript"
-import sk_SK from "./sk_SK";
 import { Message, MultiMessage } from "./localizationInterfaces";
-import { createAst } from "../tsx/createSourceFile";
-import { readDir, readFile } from "../util/fetch"
-import * as path from 'path'
-import { CodeRW } from "../io/rw";
-
-
+import { createAst } from "../react-lowcode/ast/factory";
+import { CodeRW } from "../react-lowcode/io/rw";
+import { CodeDir } from "../react-lowcode/io/dir";
 
 export function getValuesFromLocalizationASTJSON(astLocale: SourceFile | undefined, languageLocale = "sk_SK") {
   let localeMessages: Message[] = []
@@ -16,7 +12,7 @@ export function getValuesFromLocalizationASTJSON(astLocale: SourceFile | undefin
         id: property.name.text,
         value: property.initializer?.text,
         locale: languageLocale,
-        position: { pos: property.initializer.pos, end: property.initializer.end }
+        position: { pos: property.initializer?.pos, end: property.initializer?.end }
       }
       localeMessages = [...localeMessages, locale]
     })
@@ -58,13 +54,9 @@ export const changeLocaleFile = (localeFile: string, changedMessages: Message[],
 
 const JSON_EXTENSION = '.json'
 
-export const findLocaliozationFiles = async (pathToDir: string) => {
-  try {
-    const dir = await readDir(pathToDir, [JSON_EXTENSION]).catch((err) => console.log("Error", err))
-    return dir
-  } catch (error) {
-    console.log("Error", error)
-  }
+export const findLocaliozationFiles = async (pathToDir: string, io: CodeDir) => {
+  const dir = await io.readDirectory(pathToDir, [JSON_EXTENSION]).catch((err) => console.log("Error", err))
+  return dir || []
 }
 
 export const getLocaleFilesNames = (directory: string[]) => {
@@ -79,10 +71,10 @@ interface FileNameSource {
   readonly source: string 
 }
 
-export const createTemporaryLocales = async (fileNames: string[]): Promise<FileNameSource[]> => {
-  const allFiles = fileNames.map(fileName => readFile(fileName))
+export const createTemporaryLocales = async (fileNames: string[], io: CodeRW): Promise<FileNameSource[]> => {
+  const allFiles = fileNames.map(fileName => io.readFile(fileName))
   const filesObjects = fileNames.map(async (file: string, index: number) => {
-    return { locale: file, source: await allFiles[index] }
+    return { locale: file, source: await allFiles[index] || '' }
   })
   return Promise.all(filesObjects)
 }

packages/browser-extension/source/tsx/ast.ts → packages/browser-extension/source/react-lowcode/ast/find.ts

@@ -1,5 +1,5 @@
 import ts from "typescript"
-import { createAst } from "./createSourceFile"
+import { createAst } from "./factory"
 
 export interface SourceLineCol {
   fileName: string
@@ -81,26 +81,14 @@ export function astFindSource(code: string, source: SourceLineCol) {
   return null
 }
 
-export const jsxElementGetAttributes = (node: ts.JsxOpeningLikeElement) => {
-  const attributes: Array<Attribute> = []
+export const findElementInCode = (code: string, source: SourceLineCol) => {
+  const found = astFindSource(code, source)
+  if (found) {
+    const before = code.substring(0, found.end)
 
-  node.attributes.forEachChild((a: unknown) => {
-    const attribute = a as ts.JsxAttribute
-    const { initializer } = attribute
-
-    if (!initializer) return
-
-    if (initializer && ts.isStringLiteral(initializer)) {
-      attributes.push({
-        [attribute.name.text]: initializer.text,
-      })
-    } else if (initializer && ts.isJsxExpression(initializer)) {
-      attributes.push({
-        [attribute.name.text]:
-          //@ts-ignore
-          initializer.expression?.escapedText,
-      })
-    }
-  })
-  return attributes
+    const startEndOfLine = before.lastIndexOf("\n")
+    const lineStarts = startEndOfLine >= 0 ? startEndOfLine : 0
+    return code.substring(lineStarts, found.end)
+  }
+  return null
 }

packages/browser-extension/source/tsx/transformer.ts → packages/browser-extension/source/react-lowcode/ast/transformer.ts

@@ -1,5 +1,5 @@
 import ts from "typescript"
-import { wrapNodesWithFragment } from "../util/nodeCreators"
+import { wrapNodesWithFragment } from "../routes/factory"
 
 const addTransformer = <T extends ts.Node, U extends ts.Node | ts.JsxChild>(
   start: number,

packages/browser-extension/source/react-lowcode/attributes/index.ts

@@ -0,0 +1,34 @@
+import ts from "typescript"
+import { Attribute } from "../ast/find"
+
+export const findAttributeByName = (
+  attributes: Array<Attribute>,
+  attributeName: string
+) => {
+  const attribute = attributes.find(a => a[attributeName])
+  return attribute ? attribute[attributeName] : null
+}
+
+export const jsxElementGetAttributes = (node: ts.JsxOpeningLikeElement) => {
+    const attributes: Array<Attribute> = []
+
+    node.attributes.forEachChild((a: unknown) => {
+      const attribute = a as ts.JsxAttribute
+      const { initializer } = attribute
+
+      if (!initializer) return
+
+      if (initializer && ts.isStringLiteral(initializer)) {
+        attributes.push({
+          [attribute.name.text]: initializer.text,
+        })
+      } else if (initializer && ts.isJsxExpression(initializer)) {
+        attributes.push({
+          [attribute.name.text]:
+            //@ts-ignore
+            initializer.expression?.escapedText,
+        })
+      }
+    })
+    return attributes
+  }

packages/browser-extension/source/tsx/clone.ts → packages/browser-extension/source/react-lowcode/clone/clone.ts

@@ -1,20 +1,8 @@
 import ts from "typescript"
-import { SourceLineCol, astFindSource } from "./ast"
-import { createAst } from "./createSourceFile"
-import { isInsideMapPatternFunction } from "./mapRecognition"
-import { addElementsToAST } from "./transformer"
-
-export const findElementInCode = (code: string, source: SourceLineCol) => {
-  const found = astFindSource(code, source)
-  if (found) {
-    const before = code.substring(0, found.end)
-
-    const startEndOfLine = before.lastIndexOf("\n")
-    const lineStarts = startEndOfLine >= 0 ? startEndOfLine : 0
-    return code.substring(lineStarts, found.end)
-  }
-  return null
-}
+import { SourceLineCol, astFindSource } from "../ast/find"
+import { createAst } from "../ast/factory"
+import { isInsideMapPatternFunction } from "../functions/maps"
+import { addElementsToAST } from "../ast/transformer"
 
 export const addCodeSnippet = (
   code: string,

packages/browser-extension/source/cloneInspectedElement.ts → packages/browser-extension/source/react-lowcode/clone/inspected.ts

@@ -1,8 +1,7 @@
-import { cloneRoute, cloneElement } from "./cloneElements"
-import { InspectedElementPayload } from "./devtools"
-import { readFile } from "./util/fetch"
+import { cloneRoute, cloneElement } from "./source"
+import { InspectedElementPayload } from "../devtools"
 
-import { CodeRW } from "./io/rw"
+import { CodeRW } from "../io/rw"
 
 export async function cloneInspectedElement(inspectedElement: InspectedElementPayload, io: CodeRW) {  
   console.log('cloneInspectedElement A', inspectedElement)
@@ -16,9 +15,9 @@ export async function cloneInspectedElement(inspectedElement: InspectedElementPa
     console.log('cloneInspectedElement B', ownerList, columnNumber, fileName, lineNumber, event)
 
     if (ownerList && columnNumber && fileName && lineNumber) {
-      const code = await readFile(fileName).catch(err => {
+      const code = await io.readFile(fileName).catch(err => {
         throw new Error(err)
-      })
+      }) || ''
 
       if (ownerList[ownerList.length - 1].displayName === "Route") {
         cloneRoute(code, { columnNumber, lineNumber, fileName }, io)