diff --git a/packages/browser-extension/source/ContentScript/index.ts b/packages/browser-extension/source/ContentScript/index.ts index 88a5afbfb..c85ba2b6f 100644 --- a/packages/browser-extension/source/ContentScript/index.ts +++ b/packages/browser-extension/source/ContentScript/index.ts @@ -10,8 +10,8 @@ function injectScript(file_path: string, tag: string) { injectScript(browser.extension.getURL("js/injectScript.bundle.js"), "body") +//TODO if (event?.data?.payload?.event == "inspectedElement" window.addEventListener("message", event => { - //TODO if (event?.data?.payload?.event == "inspectedElement" const source = event?.data?.payload?.payload?.value?.source if ( source @@ -26,6 +26,24 @@ window.addEventListener("message", event => { } }) +window.addEventListener("load", () => { + window.location.protocol + window.location.hostname + window.location.port + + fetch('/static/js/bundle.js.map').then(ret => ret.json()).then(it => { + console.log('fetched /static/js/bundle.js.map sources', it?.sources) + if (it?.sources?.length > 0) { + const source0 = it.sources[0] + const suffix = '/webpack/bootstrap' + if (source0.endsWith(suffix)) { + const srcPath = source0.substring(0, source0.length - suffix.length) + '/src' + browser.runtime.sendMessage({ type: 'lowcodeSources', path: srcPath }) + } + } + }) +}) + browser.runtime.onConnect.addListener(port => { console.log("content.js onConnect port", port) }) diff --git a/packages/browser-extension/source/DevToolScript/index.tsx b/packages/browser-extension/source/DevToolScript/index.tsx index 2ca9c08a6..3265c46bf 100644 --- a/packages/browser-extension/source/DevToolScript/index.tsx +++ b/packages/browser-extension/source/DevToolScript/index.tsx @@ -2,16 +2,11 @@ import { browser } from "webextension-polyfill-ts"; import * as React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; -import { SourceFile, CompilerOptions, ScriptTarget, ScriptKind, CompilerHost } from "typescript"; -import ts from "typescript"; +import { findLocaliozationFiles } from "../localization/localizations"; +import { initLocalization } from "../localization/init"; + //@ts-ignore import {WCMonacoEditor} from './wcEditor' -import * as monaco from 'monaco-editor' -import { createAst } from "../tsx/createSourceFile"; -import sk_SK from "../localization/sk_SK"; -import { addNewLocale, changeAllFiles, changeLocaleFile, combineLocales, createDynamicLocales, createTemporaryLocales, getFilesFromDirectory, getLocaleFilesNames, getValuesFromLocalizationASTJSON, loadDirectoryFromProject, loadFileFromReactProject, saveAllLocalesFromTable, saveAllValuesAndParseBack, saveTableValuesAndParseBack, sendUpdatedFiles, updateFiles } from "../localization/localizations"; -import { createDynamicTable, createMultiTableWithMessages, createTableWithMessages } from "../localization/localeTables"; -import en_EN from "../localization/en_EN"; import { InspectedElementPayload } from '../devtools' import { cloneInspectedElement } from '../cloneInspectedElement' @@ -35,13 +30,22 @@ browser.devtools.panels const saveButton = panelWindow.document.getElementById('saveButton'); const columnNumber = msg?.payload?.value?.source?.columnNumber const lineNumber = msg?.payload?.value?.source?.lineNumber - console.log("Column Number", columnNumber, "Line Number", lineNumber) + console.log("Column Number", columnNumber, "Line Number", lineNumber, msg) const editorElement:WCMonacoEditor = panelWindow.document.getElementById("editor"); const editor = editorElement.editor const pathFile = msg?.fileUrl const path = pathFile?.substring(8) console.log("Path", path) + + + 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')) + initLocalization(msgFiles, panelWindow.document, io) + }) + } if (msg?.event == "inspectedElement") { try { @@ -131,80 +135,6 @@ browser.devtools.panels //panelWindow.respond = function (msg) { // port.postMessage(msg); //}; - - console.log("sk_SK stringify",JSON.stringify(sk_SK)) - - const loadedFile = await io.readFile('src/localization/en_EN.json') - const directory = await loadDirectoryFromProject('/Users/michalzaduban/Desktop/talentsbase/src/localizations') - const filesFromDirectory = await getFilesFromDirectory('/Users/michalzaduban/Desktop/talentsbase/src/localizations/') - console.log("Directory", directory) - //@ts-ignore - const fileNames = getLocaleFilesNames(directory) - console.log("Files", filesFromDirectory) - console.log("FileNames", fileNames) - const temporary = await createTemporaryLocales(fileNames, filesFromDirectory) - console.log("Temporary", temporary) - //@ts-ignore - const dynamicLocales = createDynamicLocales(temporary) - const originalDynamic = JSON.parse(JSON.stringify(dynamicLocales)); - //@ts-ignore - const loadedLocale = createAst(loadedFile,ScriptTarget.ESNext,ScriptKind.JSON ) - const sourceCodes = [sk_SK, en_EN] - console.log("SOurce codes", sourceCodes) - const all = combineLocales(sourceCodes) - //@ts-ignore - const dynamicTableBody:HTMLTableElement= panelWindow.document.getElementById('dynamic-tableBody') - //@ts-ignore - const tableBody:HTMLTableElement= panelWindow.document.getElementById('locale-tableBody') - //@ts-ignore - const allMessagesBody:HTMLTableElement= panelWindow.document.getElementById('multi-tableBody') - const astLocale = createAst(JSON.stringify(sk_SK),ScriptTarget.ESNext,ScriptKind.JSON ) - - const localeMessages = getValuesFromLocalizationASTJSON(loadedLocale) - const original = JSON.parse(JSON.stringify(localeMessages)); - const multiMessages = addNewLocale(JSON.stringify(sk_SK), JSON.stringify(en_EN) ) - const originalMulti = JSON.parse(JSON.stringify(multiMessages)); - createTableWithMessages(localeMessages, panelWindow) - //@ts-ignore - createMultiTableWithMessages(multiMessages, panelWindow) - createDynamicTable(dynamicLocales, panelWindow) - const saveDynamic = panelWindow.document.getElementById('saveDynamic') - saveDynamic?.addEventListener('click', async () => { - //@ts-ignore - const savedDynamicLocales = saveAllLocalesFromTable(dynamicTableBody, dynamicLocales) - console.log("ALl messages", savedDynamicLocales, "Original", dynamicLocales) - if(savedDynamicLocales){ - const changedFiles = await updateFiles(filesFromDirectory, savedDynamicLocales, originalDynamic) - console.log("CHANGED FILES", changedFiles) - //@ts-ignore - sendUpdatedFiles(changedFiles, fileNames, io) - } - }) - - const saveTableButton = panelWindow.document.getElementById('saveTable') - saveTableButton?.addEventListener('click', () =>{ - const messages = saveTableValuesAndParseBack(tableBody, localeMessages) - if(messages){ - //@ts-ignore - const resultOfChanging = changeLocaleFile(loadedFile,messages, original) - console.log("RESULT OF CHANGING", resultOfChanging, ) - io.writeFile('src/localization/en_EN.ts', resultOfChanging) - } - }) - - const saveAllButton = panelWindow.document.getElementById('saveAll') - saveAllButton?.addEventListener('click', () => { - //@ts-ignore - const allMessages = saveAllValuesAndParseBack(allMessagesBody, multiMessages) - console.log("ALl messages", allMessages, "Original", originalMulti) - if(allMessages){ - const {skSourceCode, enSourceCode} = changeAllFiles(JSON.stringify(sk_SK),JSON.stringify(en_EN),allMessages, originalMulti) - console.log("RESULT OF CHANGING", enSourceCode, skSourceCode, ) - - io.writeFile('src/localization/sk_SK.ts', "export default " + skSourceCode) - io.writeFile('src/localization/en_EN.ts', "export default " + enSourceCode) - } - }) const monacoElement = panelWindow.document.getElementById("monaco-editor"); if (monacoElement) { diff --git a/packages/browser-extension/source/localization/init.ts b/packages/browser-extension/source/localization/init.ts new file mode 100644 index 000000000..6b6ccb676 --- /dev/null +++ b/packages/browser-extension/source/localization/init.ts @@ -0,0 +1,80 @@ +import { createAst } from "../tsx/createSourceFile"; +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' + +export async function initLocalization(directory: string[], document: HTMLDocument, io: CodeRW) { + console.log('initLocalization', directory, document, io) + + const loadedFile = await io.readFile(directory.find((file) => file.indexOf('en') >= 0) || '')//TODO remove this + console.log("Directory", directory) + //@ts-ignore + const fileNames = getLocaleFilesNames(directory) + console.log("FileNames", fileNames) + const temporary = await createTemporaryLocales(fileNames) + console.log("Temporary", temporary) + //@ts-ignore + const dynamicLocales = createDynamicLocales(temporary) + const originalDynamic = JSON.parse(JSON.stringify(dynamicLocales)); + //@ts-ignore + const loadedLocale = createAst(loadedFile,ScriptTarget.ESNext,ScriptKind.JSON ) + const sourceCodes = [sk_SK, en_EN] + console.log("SOurce codes", sourceCodes) + const all = combineLocales(sourceCodes) + //@ts-ignore + const dynamicTableBody:HTMLTableElement= document.getElementById('dynamic-tableBody') + //@ts-ignore + const tableBody:HTMLTableElement= document.getElementById('locale-tableBody') + //@ts-ignore + const allMessagesBody:HTMLTableElement= document.getElementById('multi-tableBody') + const astLocale = createAst(JSON.stringify(sk_SK),ScriptTarget.ESNext,ScriptKind.JSON ) + + const localeMessages = getValuesFromLocalizationASTJSON(loadedLocale) + const original = JSON.parse(JSON.stringify(localeMessages)); + const multiMessages = addNewLocale(JSON.stringify(sk_SK), JSON.stringify(en_EN) ) + const originalMulti = JSON.parse(JSON.stringify(multiMessages)); + createTableWithMessages(localeMessages, document) + //@ts-ignore + createMultiTableWithMessages(multiMessages, document) + createDynamicTable(dynamicLocales, document) + const saveDynamic = document.getElementById('saveDynamic') + saveDynamic?.addEventListener('click', async () => { + //@ts-ignore + const savedDynamicLocales = saveAllLocalesFromTable(dynamicTableBody, dynamicLocales) + console.log("ALl messages", savedDynamicLocales, "Original", dynamicLocales) + if(savedDynamicLocales){ + const changedFiles = await updateFiles(temporary, savedDynamicLocales, originalDynamic) + console.log("CHANGED FILES", changedFiles) + //@ts-ignore + sendUpdatedFiles(changedFiles, fileNames, io) + } + }) + + const saveTableButton = document.getElementById('saveTable') + saveTableButton?.addEventListener('click', () =>{ + const messages = saveTableValuesAndParseBack(tableBody, localeMessages) + if(messages){ + //@ts-ignore + const resultOfChanging = changeLocaleFile(loadedFile,messages, original) + console.log("RESULT OF CHANGING", resultOfChanging, ) + io.writeFile('src/localization/en_EN.ts', resultOfChanging) + } + }) + + const saveAllButton = document.getElementById('saveAll') + saveAllButton?.addEventListener('click', () => { + //@ts-ignore + const allMessages = saveAllValuesAndParseBack(allMessagesBody, multiMessages) + console.log("ALl messages", allMessages, "Original", originalMulti) + if(allMessages){ + const {skSourceCode, enSourceCode} = changeAllFiles(JSON.stringify(sk_SK),JSON.stringify(en_EN),allMessages, originalMulti) + console.log("RESULT OF CHANGING", enSourceCode, skSourceCode, ) + + io.writeFile('src/localization/sk_SK.ts', "export default " + skSourceCode) + io.writeFile('src/localization/en_EN.ts', "export default " + enSourceCode) + } + }) +} \ No newline at end of file diff --git a/packages/browser-extension/source/localization/localeTables.ts b/packages/browser-extension/source/localization/localeTables.ts index cacd197cc..33398051b 100644 --- a/packages/browser-extension/source/localization/localeTables.ts +++ b/packages/browser-extension/source/localization/localeTables.ts @@ -2,14 +2,14 @@ import ts from 'typescript' import { Message, MultiMessage } from './localizationInterfaces' -export function createTableWithMessages(messages: Message[], panelWindow: Window) { - const tableBody = panelWindow.document.getElementById('locale-tableBody') +export function createTableWithMessages(messages: Message[], document: HTMLDocument) { + const tableBody = document.getElementById('locale-tableBody') messages.forEach((message: Message) => { - const tr = panelWindow.document.createElement('tr') + const tr = document.createElement('tr') tableBody?.appendChild(tr) - const input = panelWindow.document.createElement('input') - const messageId = panelWindow.document.createElement('td') - const locale = panelWindow.document.createElement('td') + const input = document.createElement('input') + const messageId = document.createElement('td') + const locale = document.createElement('td') messageId.innerText = message.id input.value = message.value locale.appendChild(input) @@ -19,17 +19,17 @@ export function createTableWithMessages(messages: Message[], panelWindow: Window } -export function createMultiTableWithMessages(messages: MultiMessage[], panelWindow: Window) { - const tableBody = panelWindow.document.getElementById('multi-tableBody') +export function createMultiTableWithMessages(messages: MultiMessage[], document: HTMLDocument) { + const tableBody = document.getElementById('multi-tableBody') console.log("Creating table with values", messages) messages.forEach((message: MultiMessage) => { - const tr = panelWindow.document.createElement('tr') + const tr = document.createElement('tr') tableBody?.appendChild(tr) - const skInput = panelWindow.document.createElement('input') - const enInput = panelWindow.document.createElement('input') - const messageId = panelWindow.document.createElement('td') - const skLocale = panelWindow.document.createElement('td') - const enLocale = panelWindow.document.createElement('td') + const skInput = document.createElement('input') + const enInput = document.createElement('input') + const messageId = document.createElement('td') + const skLocale = document.createElement('td') + const enLocale = document.createElement('td') messageId.innerText = message.id skInput.value = message.skSK.value skLocale.appendChild(skInput) @@ -42,19 +42,19 @@ export function createMultiTableWithMessages(messages: MultiMessage[], panelWind } -export function createDynamicTable(allMessages = [], panelWindow: Window) { - const tableBody = panelWindow.document.getElementById('dynamic-tableBody') +export function createDynamicTable(allMessages = [], document: HTMLDocument) { + const tableBody = document.getElementById('dynamic-tableBody') console.log("Creating table with values", allMessages) allMessages.forEach((message: any) => { console.log("Messages", message) - const tr = panelWindow.document.createElement('tr') + const tr = document.createElement('tr') tableBody?.appendChild(tr) - const messageId = panelWindow.document.createElement('td') + const messageId = document.createElement('td') messageId.innerText = message.id tr.append(messageId) message.messages.forEach((localeMessage: any) => { - const input = panelWindow.document.createElement('input') - const cell = panelWindow.document.createElement('td') + const input = document.createElement('input') + const cell = document.createElement('td') input.value = localeMessage.value cell.appendChild(input) tr.appendChild(cell) diff --git a/packages/browser-extension/source/localization/localizations.ts b/packages/browser-extension/source/localization/localizations.ts index 452e8da7b..12959a1db 100644 --- a/packages/browser-extension/source/localization/localizations.ts +++ b/packages/browser-extension/source/localization/localizations.ts @@ -56,54 +56,35 @@ export const changeLocaleFile = (localeFile: string, changedMessages: Message[], } -export const loadFileFromReactProject = async (pathToFile: string) => { - try { - const file = await readFile(pathToFile).catch((err) => console.log("Error", err)) - return file - } catch (error) { - console.log("Error", error) - } -} +const JSON_EXTENSION = '.json' -export const loadDirectoryFromProject = async (pathToDir: string) => { +export const findLocaliozationFiles = async (pathToDir: string) => { try { - const dir = await readDir(pathToDir).catch((err) => console.log("Error", err)) + const dir = await readDir(pathToDir, [JSON_EXTENSION]).catch((err) => console.log("Error", err)) return dir } catch (error) { console.log("Error", error) } } -export const getFilesFromDirectory = async (pathToDirectory: string) => { - try { - const directory = await readDir(pathToDirectory).catch((err) => console.log("Error", err)) - const files = directory.map(async (file: string) => { - const loadedFile = await loadFileFromReactProject(`${pathToDirectory}${file}`); - return loadedFile - }); - return files - } catch (error) { - console.log("err", error) - } -} - export const getLocaleFilesNames = (directory: string[]) => { return directory.map((file: string) => { //delete .json - return file.substring(0, file.length - 5) + return file//.substring(0, file.length - JSON_EXTENSION.length)// TODO make more robust indexOf('.') }) } -export const getFile = async (file: any) => { - return await file +interface FileNameSource { + readonly locale: string + readonly source: string } -export const createTemporaryLocales = async (fileNames: string[], files: any[]) => { - const allFiles = await Promise.all(files.map((file: any) => getFile(file))) - const filesObjects = fileNames.map((file: string, index: number) => { - return { locale: file, source: allFiles[index] } +export const createTemporaryLocales = async (fileNames: string[]): Promise => { + const allFiles = fileNames.map(fileName => readFile(fileName)) + const filesObjects = fileNames.map(async (file: string, index: number) => { + return { locale: file, source: await allFiles[index] } }) - return filesObjects + return Promise.all(filesObjects) } export const oneWithAllLocales = (allLocaleMessaages = []) => { @@ -229,8 +210,7 @@ export const combineLocales = (sourceCodes: any[]) => { // return finalMessages } -export const updateFiles = async (sourceCodes = [], changedMessages = [], originalMessages = []) => { - const allFiles = await Promise.all(sourceCodes.map((file: any) => getFile(file))) +export const updateFiles = async (allFiles: FileNameSource[] = [], changedMessages = [], originalMessages = []) => { for (let i = changedMessages.length - 1; i >= 0; i--) { console.log("I", i, originalMessages, allFiles) //@ts-ignore @@ -240,7 +220,7 @@ export const updateFiles = async (sourceCodes = [], changedMessages = [], origin //@ts-ignore if (message.value == originalMessages[i].messages[index].value) { console.log("") - } else { + } else if (message.position) { //@ts-ignore const before = allFiles[index].substring(0, message.position.pos + 1) //@ts-ignore diff --git a/packages/browser-extension/source/util/fetch.ts b/packages/browser-extension/source/util/fetch.ts index 1f05ebb0a..d3d4d785e 100644 --- a/packages/browser-extension/source/util/fetch.ts +++ b/packages/browser-extension/source/util/fetch.ts @@ -22,10 +22,10 @@ export const readFile = async (filePath: string) => { } } - -export const readDir = async (dirPath: string) => { +export const readDir = async (dirPath: string, extensions: string[] = []) => { try { - const res = await fetch(`http://localhost:7500/dir/${dirPath}`) + const queryString = [extensions.map((ext) => 'ext=' + encodeURI(ext)), 'depth=10'].join('&') + const res = await fetch(`http://localhost:7500/dir/${dirPath}?${queryString}`)//extensions const dir = await res.json() return dir } catch (err) {