Skip to content

Commit

Permalink
#44 automaticaly discover localization json /statis/js/bundle.js
Browse files Browse the repository at this point in the history
  • Loading branch information
Jozef Slezak committed Mar 1, 2021
1 parent c6cc947 commit 2d6b5c5
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 141 deletions.
20 changes: 19 additions & 1 deletion packages/browser-extension/source/ContentScript/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
})
96 changes: 13 additions & 83 deletions packages/browser-extension/source/DevToolScript/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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 {
Expand Down Expand Up @@ -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) {
Expand Down
80 changes: 80 additions & 0 deletions packages/browser-extension/source/localization/init.ts
Original file line number Diff line number Diff line change
@@ -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)
}
})
}
40 changes: 20 additions & 20 deletions packages/browser-extension/source/localization/localeTables.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -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)
Expand Down
Loading

0 comments on commit 2d6b5c5

Please sign in to comment.