piral-debug-utils
Advanced tools
Comparing version 0.13.5 to 0.13.6
@@ -1,9 +0,2 @@ | ||
import { PiletApiCreator, PiletDependencyGetter, PiletLoader, PiletRequester } from 'piral-base'; | ||
export interface DebuggerOptions { | ||
createApi: PiletApiCreator; | ||
getDependencies: PiletDependencyGetter; | ||
loadPilet: PiletLoader; | ||
requestPilets: PiletRequester; | ||
context?: any; | ||
} | ||
import { DebuggerOptions } from './types'; | ||
export declare function installPiralDebug(options: DebuggerOptions): void; |
244
esm/debug.js
@@ -12,7 +12,128 @@ var __rest = (this && this.__rest) || function (s, e) { | ||
}; | ||
import { isfunc } from 'piral-base'; | ||
import { DebugTracker } from './DebugTracker'; | ||
import { VisualizationWrapper } from './VisualizationWrapper'; | ||
export function installPiralDebug(options) { | ||
const { context } = options, pilets = __rest(options, ["context"]); | ||
// the DEBUG_PIRAL env should contain the Piral CLI compatibility version | ||
window['dbg:piral'] = { | ||
debug: 'v0', | ||
const { context, onChange } = options, pilets = __rest(options, ["context", "onChange"]); | ||
const selfSource = 'piral-debug-api'; | ||
const debugApiVersion = 'v1'; | ||
const settings = { | ||
viewState: { | ||
value: sessionStorage.getItem('dbg:view-state') !== 'off', | ||
type: 'boolean', | ||
label: 'State container logging', | ||
}, | ||
loadPilets: { | ||
value: sessionStorage.getItem('dbg:load-pilets') === 'on', | ||
type: 'boolean', | ||
label: 'Load available pilets', | ||
}, | ||
hardRefresh: { | ||
value: sessionStorage.getItem('dbg:hard-refresh') === 'on', | ||
type: 'boolean', | ||
label: 'Full refresh on change', | ||
}, | ||
viewOrigins: { | ||
value: sessionStorage.getItem('dbg:view-origins') === 'on', | ||
type: 'boolean', | ||
label: 'Visualize component origins', | ||
}, | ||
}; | ||
const events = []; | ||
const sendMessage = (content) => { | ||
window.postMessage({ | ||
content, | ||
source: selfSource, | ||
version: debugApiVersion, | ||
}, '*'); | ||
}; | ||
const sendCurrentPilets = (pilets) => { | ||
sendMessage({ | ||
type: 'pilets', | ||
pilets: pilets.map((pilet) => ({ | ||
name: pilet.name, | ||
version: pilet.version, | ||
disabled: !!pilet.disabled, | ||
})), | ||
}); | ||
}; | ||
const sendCurrentContainer = (state) => { | ||
sendMessage({ | ||
type: 'container', | ||
container: JSON.parse(JSON.stringify(state)), | ||
}); | ||
}; | ||
const sendCurrentRoutes = (pages, routes) => { | ||
const registeredRoutes = Object.keys(pages); | ||
const componentRoutes = Object.keys(routes); | ||
sendMessage({ | ||
type: 'routes', | ||
routes: [...componentRoutes, ...registeredRoutes], | ||
}); | ||
}; | ||
const setSetting = (setting, key, value) => { | ||
setting.value = value; | ||
sessionStorage.setItem(key, value ? 'on' : 'off'); | ||
}; | ||
const updateSettings = (values) => { | ||
const prev = settings.viewOrigins.value; | ||
setSetting(settings.viewState, 'dbg:view-state', values.viewState); | ||
setSetting(settings.loadPilets, 'dbg:load-pilets', values.loadPilets); | ||
setSetting(settings.hardRefresh, 'dbg:hard-refresh', values.hardRefresh); | ||
setSetting(settings.viewOrigins, 'dbg:view-origins', values.viewOrigins); | ||
const curr = settings.viewOrigins.value; | ||
if (prev !== curr) { | ||
updateVisualize(curr); | ||
} | ||
sendMessage({ | ||
settings, | ||
type: 'settings', | ||
}); | ||
}; | ||
const togglePilet = (name) => { | ||
const pilet = context.readState((state) => state.modules).find((m) => m.name === name); | ||
if (pilet.disabled) { | ||
try { | ||
const { createApi } = options; | ||
const newApi = createApi(pilet); | ||
context.injectPilet(pilet.original); | ||
pilet.original.setup(newApi); | ||
} | ||
catch (error) { | ||
console.error(error); | ||
} | ||
} | ||
else { | ||
context.injectPilet({ name, disabled: true, original: pilet }); | ||
} | ||
}; | ||
const removePilet = (name) => { | ||
context.injectPilet({ name }); | ||
context.dispatch((state) => (Object.assign(Object.assign({}, state), { modules: state.modules.filter((m) => m.name !== name) }))); | ||
}; | ||
const appendPilet = (meta) => { | ||
const { createApi, loadPilet } = options; | ||
loadPilet(meta).then((pilet) => { | ||
try { | ||
const newApi = createApi(pilet); | ||
context.injectPilet(pilet); | ||
pilet.setup(newApi); | ||
} | ||
catch (error) { | ||
console.error(error); | ||
} | ||
}); | ||
}; | ||
const toggleVisualize = () => { | ||
context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { visualize: Object.assign(Object.assign({}, s.$debug.visualize), { force: !s.$debug.visualize.force }) }) }))); | ||
}; | ||
const updateVisualize = (active) => { | ||
context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { visualize: Object.assign(Object.assign({}, s.$debug.visualize), { active }) }) }))); | ||
}; | ||
const goToRoute = (route) => { | ||
context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { route }) }))); | ||
}; | ||
const eventDispatcher = document.body.dispatchEvent; | ||
const debugApi = { | ||
debug: debugApiVersion, | ||
instance: { | ||
@@ -31,3 +152,118 @@ name: process.env.BUILD_PCKG_NAME, | ||
}; | ||
const start = () => { | ||
const registeredRoutes = context.readState((state) => Object.keys(state.registry.pages)); | ||
const componentRoutes = context.readState((state) => Object.keys(state.routes)); | ||
const routes = [...componentRoutes, ...registeredRoutes]; | ||
const container = JSON.parse(JSON.stringify(context.readState((s) => s))); | ||
const pilets = context | ||
.readState((m) => m.modules) | ||
.map((pilet) => ({ | ||
name: pilet.name, | ||
version: pilet.version, | ||
disabled: pilet.disabled, | ||
})); | ||
sendMessage({ | ||
type: 'available', | ||
name: debugApi.instance.name, | ||
version: debugApi.instance.version, | ||
kind: debugApiVersion, | ||
capabilities: ['events', 'container', 'routes', 'pilets', 'settings'], | ||
state: { | ||
routes, | ||
pilets, | ||
container, | ||
settings, | ||
events, | ||
}, | ||
}); | ||
}; | ||
document.body.dispatchEvent = function (ev) { | ||
if (ev.type.startsWith('piral-')) { | ||
events.unshift({ | ||
id: events.length.toString(), | ||
name: ev.type.replace('piral-', ''), | ||
args: ev.detail.arg, | ||
time: Date.now(), | ||
}); | ||
sendMessage({ | ||
events, | ||
type: 'events', | ||
}); | ||
} | ||
return eventDispatcher.call(this, ev); | ||
}; | ||
context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: { | ||
visualize: { | ||
active: settings.viewOrigins.value, | ||
force: false, | ||
}, | ||
route: undefined, | ||
}, components: Object.assign(Object.assign({}, s.components), { Debug: DebugTracker }), registry: Object.assign(Object.assign({}, s.registry), { wrappers: Object.assign(Object.assign({}, s.registry.wrappers), { '*': VisualizationWrapper }) }) }))); | ||
window.addEventListener('storage', (event) => { | ||
if (event.storageArea === sessionStorage) { | ||
// potentially unknowingly updated settings | ||
updateSettings({ | ||
viewState: sessionStorage.getItem('dbg:view-state') !== 'off', | ||
loadPilets: sessionStorage.getItem('dbg:load-pilets') === 'on', | ||
hardRefresh: sessionStorage.getItem('dbg:hard-refresh') === 'on', | ||
viewOrigins: sessionStorage.getItem('dbg:view-origins') === 'on', | ||
}); | ||
} | ||
}); | ||
window.addEventListener('message', (event) => { | ||
const { source, version, content } = event.data; | ||
if (source !== selfSource && version === debugApiVersion) { | ||
switch (content.type) { | ||
case 'init': | ||
return start(); | ||
case 'update-settings': | ||
return updateSettings(content.settings); | ||
case 'append-pilet': | ||
return appendPilet(content.meta); | ||
case 'remove-pilet': | ||
return removePilet(content.name); | ||
case 'toggle-pilet': | ||
return togglePilet(content.name); | ||
case 'emit-event': | ||
return context.emit(content.name, content.args); | ||
case 'goto-route': | ||
return goToRoute(content.route); | ||
case 'visualize-all': | ||
return toggleVisualize(); | ||
} | ||
} | ||
}); | ||
if (isfunc(onChange)) { | ||
onChange((previous, current) => { | ||
if (settings.viewState) { | ||
const infos = new Error().stack; | ||
if (infos) { | ||
// Chrome, Firefox, ... (full capability) | ||
const lastLine = infos.split('\n')[7]; | ||
if (lastLine) { | ||
const action = lastLine.replace(/^\s+at\s+(Atom\.|Object\.)?/, ''); | ||
console.group(`%c Piral State Change %c ${new Date().toLocaleTimeString()}`, 'color: gray; font-weight: lighter;', 'color: black; font-weight: bold;'); | ||
console.log('%c Previous', `color: #9E9E9E; font-weight: bold`, previous); | ||
console.log('%c Action', `color: #03A9F4; font-weight: bold`, action); | ||
console.log('%c Next', `color: #4CAF50; font-weight: bold`, current); | ||
console.groupEnd(); | ||
} | ||
} | ||
else { | ||
// IE 11, ... (does not know colors etc.) | ||
console.log('Changed state', previous, current); | ||
} | ||
} | ||
if (current.modules !== previous.modules) { | ||
sendCurrentPilets(current.modules); | ||
} | ||
if (current.registry.pages !== previous.registry.pages || current.routes !== previous.routes) { | ||
sendCurrentRoutes(current.registry.pages, current.routes); | ||
} | ||
sendCurrentContainer(current); | ||
}); | ||
} | ||
window['dbg:piral'] = debugApi; | ||
start(); | ||
} | ||
//# sourceMappingURL=debug.js.map |
@@ -1,9 +0,2 @@ | ||
import { PiletApiCreator, PiletDependencyGetter, PiletLoader, PiletRequester } from 'piral-base'; | ||
export interface DebuggerOptions { | ||
createApi: PiletApiCreator; | ||
getDependencies: PiletDependencyGetter; | ||
loadPilet: PiletLoader; | ||
requestPilets: PiletRequester; | ||
context?: any; | ||
} | ||
import { DebuggerOptions } from './types'; | ||
export declare function installPiralDebug(options: DebuggerOptions): void; |
244
lib/debug.js
@@ -15,7 +15,128 @@ "use strict"; | ||
exports.installPiralDebug = void 0; | ||
const piral_base_1 = require("piral-base"); | ||
const DebugTracker_1 = require("./DebugTracker"); | ||
const VisualizationWrapper_1 = require("./VisualizationWrapper"); | ||
function installPiralDebug(options) { | ||
const { context } = options, pilets = __rest(options, ["context"]); | ||
// the DEBUG_PIRAL env should contain the Piral CLI compatibility version | ||
window['dbg:piral'] = { | ||
debug: 'v0', | ||
const { context, onChange } = options, pilets = __rest(options, ["context", "onChange"]); | ||
const selfSource = 'piral-debug-api'; | ||
const debugApiVersion = 'v1'; | ||
const settings = { | ||
viewState: { | ||
value: sessionStorage.getItem('dbg:view-state') !== 'off', | ||
type: 'boolean', | ||
label: 'State container logging', | ||
}, | ||
loadPilets: { | ||
value: sessionStorage.getItem('dbg:load-pilets') === 'on', | ||
type: 'boolean', | ||
label: 'Load available pilets', | ||
}, | ||
hardRefresh: { | ||
value: sessionStorage.getItem('dbg:hard-refresh') === 'on', | ||
type: 'boolean', | ||
label: 'Full refresh on change', | ||
}, | ||
viewOrigins: { | ||
value: sessionStorage.getItem('dbg:view-origins') === 'on', | ||
type: 'boolean', | ||
label: 'Visualize component origins', | ||
}, | ||
}; | ||
const events = []; | ||
const sendMessage = (content) => { | ||
window.postMessage({ | ||
content, | ||
source: selfSource, | ||
version: debugApiVersion, | ||
}, '*'); | ||
}; | ||
const sendCurrentPilets = (pilets) => { | ||
sendMessage({ | ||
type: 'pilets', | ||
pilets: pilets.map((pilet) => ({ | ||
name: pilet.name, | ||
version: pilet.version, | ||
disabled: !!pilet.disabled, | ||
})), | ||
}); | ||
}; | ||
const sendCurrentContainer = (state) => { | ||
sendMessage({ | ||
type: 'container', | ||
container: JSON.parse(JSON.stringify(state)), | ||
}); | ||
}; | ||
const sendCurrentRoutes = (pages, routes) => { | ||
const registeredRoutes = Object.keys(pages); | ||
const componentRoutes = Object.keys(routes); | ||
sendMessage({ | ||
type: 'routes', | ||
routes: [...componentRoutes, ...registeredRoutes], | ||
}); | ||
}; | ||
const setSetting = (setting, key, value) => { | ||
setting.value = value; | ||
sessionStorage.setItem(key, value ? 'on' : 'off'); | ||
}; | ||
const updateSettings = (values) => { | ||
const prev = settings.viewOrigins.value; | ||
setSetting(settings.viewState, 'dbg:view-state', values.viewState); | ||
setSetting(settings.loadPilets, 'dbg:load-pilets', values.loadPilets); | ||
setSetting(settings.hardRefresh, 'dbg:hard-refresh', values.hardRefresh); | ||
setSetting(settings.viewOrigins, 'dbg:view-origins', values.viewOrigins); | ||
const curr = settings.viewOrigins.value; | ||
if (prev !== curr) { | ||
updateVisualize(curr); | ||
} | ||
sendMessage({ | ||
settings, | ||
type: 'settings', | ||
}); | ||
}; | ||
const togglePilet = (name) => { | ||
const pilet = context.readState((state) => state.modules).find((m) => m.name === name); | ||
if (pilet.disabled) { | ||
try { | ||
const { createApi } = options; | ||
const newApi = createApi(pilet); | ||
context.injectPilet(pilet.original); | ||
pilet.original.setup(newApi); | ||
} | ||
catch (error) { | ||
console.error(error); | ||
} | ||
} | ||
else { | ||
context.injectPilet({ name, disabled: true, original: pilet }); | ||
} | ||
}; | ||
const removePilet = (name) => { | ||
context.injectPilet({ name }); | ||
context.dispatch((state) => (Object.assign(Object.assign({}, state), { modules: state.modules.filter((m) => m.name !== name) }))); | ||
}; | ||
const appendPilet = (meta) => { | ||
const { createApi, loadPilet } = options; | ||
loadPilet(meta).then((pilet) => { | ||
try { | ||
const newApi = createApi(pilet); | ||
context.injectPilet(pilet); | ||
pilet.setup(newApi); | ||
} | ||
catch (error) { | ||
console.error(error); | ||
} | ||
}); | ||
}; | ||
const toggleVisualize = () => { | ||
context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { visualize: Object.assign(Object.assign({}, s.$debug.visualize), { force: !s.$debug.visualize.force }) }) }))); | ||
}; | ||
const updateVisualize = (active) => { | ||
context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { visualize: Object.assign(Object.assign({}, s.$debug.visualize), { active }) }) }))); | ||
}; | ||
const goToRoute = (route) => { | ||
context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { route }) }))); | ||
}; | ||
const eventDispatcher = document.body.dispatchEvent; | ||
const debugApi = { | ||
debug: debugApiVersion, | ||
instance: { | ||
@@ -34,4 +155,119 @@ name: process.env.BUILD_PCKG_NAME, | ||
}; | ||
const start = () => { | ||
const registeredRoutes = context.readState((state) => Object.keys(state.registry.pages)); | ||
const componentRoutes = context.readState((state) => Object.keys(state.routes)); | ||
const routes = [...componentRoutes, ...registeredRoutes]; | ||
const container = JSON.parse(JSON.stringify(context.readState((s) => s))); | ||
const pilets = context | ||
.readState((m) => m.modules) | ||
.map((pilet) => ({ | ||
name: pilet.name, | ||
version: pilet.version, | ||
disabled: pilet.disabled, | ||
})); | ||
sendMessage({ | ||
type: 'available', | ||
name: debugApi.instance.name, | ||
version: debugApi.instance.version, | ||
kind: debugApiVersion, | ||
capabilities: ['events', 'container', 'routes', 'pilets', 'settings'], | ||
state: { | ||
routes, | ||
pilets, | ||
container, | ||
settings, | ||
events, | ||
}, | ||
}); | ||
}; | ||
document.body.dispatchEvent = function (ev) { | ||
if (ev.type.startsWith('piral-')) { | ||
events.unshift({ | ||
id: events.length.toString(), | ||
name: ev.type.replace('piral-', ''), | ||
args: ev.detail.arg, | ||
time: Date.now(), | ||
}); | ||
sendMessage({ | ||
events, | ||
type: 'events', | ||
}); | ||
} | ||
return eventDispatcher.call(this, ev); | ||
}; | ||
context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: { | ||
visualize: { | ||
active: settings.viewOrigins.value, | ||
force: false, | ||
}, | ||
route: undefined, | ||
}, components: Object.assign(Object.assign({}, s.components), { Debug: DebugTracker_1.DebugTracker }), registry: Object.assign(Object.assign({}, s.registry), { wrappers: Object.assign(Object.assign({}, s.registry.wrappers), { '*': VisualizationWrapper_1.VisualizationWrapper }) }) }))); | ||
window.addEventListener('storage', (event) => { | ||
if (event.storageArea === sessionStorage) { | ||
// potentially unknowingly updated settings | ||
updateSettings({ | ||
viewState: sessionStorage.getItem('dbg:view-state') !== 'off', | ||
loadPilets: sessionStorage.getItem('dbg:load-pilets') === 'on', | ||
hardRefresh: sessionStorage.getItem('dbg:hard-refresh') === 'on', | ||
viewOrigins: sessionStorage.getItem('dbg:view-origins') === 'on', | ||
}); | ||
} | ||
}); | ||
window.addEventListener('message', (event) => { | ||
const { source, version, content } = event.data; | ||
if (source !== selfSource && version === debugApiVersion) { | ||
switch (content.type) { | ||
case 'init': | ||
return start(); | ||
case 'update-settings': | ||
return updateSettings(content.settings); | ||
case 'append-pilet': | ||
return appendPilet(content.meta); | ||
case 'remove-pilet': | ||
return removePilet(content.name); | ||
case 'toggle-pilet': | ||
return togglePilet(content.name); | ||
case 'emit-event': | ||
return context.emit(content.name, content.args); | ||
case 'goto-route': | ||
return goToRoute(content.route); | ||
case 'visualize-all': | ||
return toggleVisualize(); | ||
} | ||
} | ||
}); | ||
if (piral_base_1.isfunc(onChange)) { | ||
onChange((previous, current) => { | ||
if (settings.viewState) { | ||
const infos = new Error().stack; | ||
if (infos) { | ||
// Chrome, Firefox, ... (full capability) | ||
const lastLine = infos.split('\n')[7]; | ||
if (lastLine) { | ||
const action = lastLine.replace(/^\s+at\s+(Atom\.|Object\.)?/, ''); | ||
console.group(`%c Piral State Change %c ${new Date().toLocaleTimeString()}`, 'color: gray; font-weight: lighter;', 'color: black; font-weight: bold;'); | ||
console.log('%c Previous', `color: #9E9E9E; font-weight: bold`, previous); | ||
console.log('%c Action', `color: #03A9F4; font-weight: bold`, action); | ||
console.log('%c Next', `color: #4CAF50; font-weight: bold`, current); | ||
console.groupEnd(); | ||
} | ||
} | ||
else { | ||
// IE 11, ... (does not know colors etc.) | ||
console.log('Changed state', previous, current); | ||
} | ||
} | ||
if (current.modules !== previous.modules) { | ||
sendCurrentPilets(current.modules); | ||
} | ||
if (current.registry.pages !== previous.registry.pages || current.routes !== previous.routes) { | ||
sendCurrentRoutes(current.registry.pages, current.routes); | ||
} | ||
sendCurrentContainer(current); | ||
}); | ||
} | ||
window['dbg:piral'] = debugApi; | ||
start(); | ||
} | ||
exports.installPiralDebug = installPiralDebug; | ||
//# sourceMappingURL=debug.js.map |
{ | ||
"name": "piral-debug-utils", | ||
"version": "0.13.5", | ||
"version": "0.13.6", | ||
"description": "Utilities for debugging Piral instances.", | ||
@@ -41,8 +41,8 @@ "keywords": [ | ||
"devDependencies": { | ||
"piral-base": "^0.13.5" | ||
"piral-core": "^0.13.6" | ||
}, | ||
"peerDependencies": { | ||
"piral-base": "0.12.x || 0.13.x" | ||
"piral-core": "0.13.x" | ||
}, | ||
"gitHead": "79c0410ffbaa50756b71db8adff639b55c98af1d" | ||
"gitHead": "11c066bb86dcf097171236030d5aa1431588f537" | ||
} |
330
src/debug.ts
@@ -1,17 +0,173 @@ | ||
import { PiletApiCreator, PiletDependencyGetter, PiletLoader, PiletRequester } from 'piral-base'; | ||
import { isfunc } from 'piral-base'; | ||
import { DebugTracker } from './DebugTracker'; | ||
import { VisualizationWrapper } from './VisualizationWrapper'; | ||
import { DebuggerOptions } from './types'; | ||
export interface DebuggerOptions { | ||
createApi: PiletApiCreator; | ||
getDependencies: PiletDependencyGetter; | ||
loadPilet: PiletLoader; | ||
requestPilets: PiletRequester; | ||
context?: any; | ||
} | ||
export function installPiralDebug(options: DebuggerOptions) { | ||
const { context, ...pilets } = options; | ||
const { context, onChange, ...pilets } = options; | ||
const selfSource = 'piral-debug-api'; | ||
const debugApiVersion = 'v1'; | ||
const settings = { | ||
viewState: { | ||
value: sessionStorage.getItem('dbg:view-state') !== 'off', | ||
type: 'boolean', | ||
label: 'State container logging', | ||
}, | ||
loadPilets: { | ||
value: sessionStorage.getItem('dbg:load-pilets') === 'on', | ||
type: 'boolean', | ||
label: 'Load available pilets', | ||
}, | ||
hardRefresh: { | ||
value: sessionStorage.getItem('dbg:hard-refresh') === 'on', | ||
type: 'boolean', | ||
label: 'Full refresh on change', | ||
}, | ||
viewOrigins: { | ||
value: sessionStorage.getItem('dbg:view-origins') === 'on', | ||
type: 'boolean', | ||
label: 'Visualize component origins', | ||
}, | ||
}; | ||
const events = []; | ||
// the DEBUG_PIRAL env should contain the Piral CLI compatibility version | ||
window['dbg:piral'] = { | ||
debug: 'v0', | ||
const sendMessage = (content: any) => { | ||
window.postMessage( | ||
{ | ||
content, | ||
source: selfSource, | ||
version: debugApiVersion, | ||
}, | ||
'*', | ||
); | ||
}; | ||
const sendCurrentPilets = (pilets: Array<any>) => { | ||
sendMessage({ | ||
type: 'pilets', | ||
pilets: pilets.map((pilet) => ({ | ||
name: pilet.name, | ||
version: pilet.version, | ||
disabled: !!pilet.disabled, | ||
})), | ||
}); | ||
}; | ||
const sendCurrentContainer = (state: any) => { | ||
sendMessage({ | ||
type: 'container', | ||
container: JSON.parse(JSON.stringify(state)), | ||
}); | ||
}; | ||
const sendCurrentRoutes = (pages: Record<string, any>, routes: Record<string, any>) => { | ||
const registeredRoutes = Object.keys(pages); | ||
const componentRoutes = Object.keys(routes); | ||
sendMessage({ | ||
type: 'routes', | ||
routes: [...componentRoutes, ...registeredRoutes], | ||
}); | ||
}; | ||
const setSetting = (setting: { value: any }, key: string, value: any) => { | ||
setting.value = value; | ||
sessionStorage.setItem(key, value ? 'on' : 'off'); | ||
}; | ||
const updateSettings = (values: Record<string, any>) => { | ||
const prev = settings.viewOrigins.value; | ||
setSetting(settings.viewState, 'dbg:view-state', values.viewState); | ||
setSetting(settings.loadPilets, 'dbg:load-pilets', values.loadPilets); | ||
setSetting(settings.hardRefresh, 'dbg:hard-refresh', values.hardRefresh); | ||
setSetting(settings.viewOrigins, 'dbg:view-origins', values.viewOrigins); | ||
const curr = settings.viewOrigins.value; | ||
if (prev !== curr) { | ||
updateVisualize(curr); | ||
} | ||
sendMessage({ | ||
settings, | ||
type: 'settings', | ||
}); | ||
}; | ||
const togglePilet = (name: string) => { | ||
const pilet: any = context.readState((state) => state.modules).find((m) => m.name === name); | ||
if (pilet.disabled) { | ||
try { | ||
const { createApi } = options; | ||
const newApi = createApi(pilet); | ||
context.injectPilet(pilet.original); | ||
pilet.original.setup(newApi); | ||
} catch (error) { | ||
console.error(error); | ||
} | ||
} else { | ||
context.injectPilet({ name, disabled: true, original: pilet } as any); | ||
} | ||
}; | ||
const removePilet = (name: string) => { | ||
context.injectPilet({ name } as any); | ||
context.dispatch((state) => ({ | ||
...state, | ||
modules: state.modules.filter((m) => m.name !== name), | ||
})); | ||
}; | ||
const appendPilet = (meta: any) => { | ||
const { createApi, loadPilet } = options; | ||
loadPilet(meta).then((pilet) => { | ||
try { | ||
const newApi = createApi(pilet); | ||
context.injectPilet(pilet); | ||
pilet.setup(newApi as any); | ||
} catch (error) { | ||
console.error(error); | ||
} | ||
}); | ||
}; | ||
const toggleVisualize = () => { | ||
context.dispatch((s) => ({ | ||
...s, | ||
$debug: { | ||
...s.$debug, | ||
visualize: { | ||
...s.$debug.visualize, | ||
force: !s.$debug.visualize.force, | ||
}, | ||
}, | ||
})); | ||
}; | ||
const updateVisualize = (active: boolean) => { | ||
context.dispatch((s) => ({ | ||
...s, | ||
$debug: { | ||
...s.$debug, | ||
visualize: { | ||
...s.$debug.visualize, | ||
active, | ||
}, | ||
}, | ||
})); | ||
}; | ||
const goToRoute = (route: string) => { | ||
context.dispatch((s) => ({ | ||
...s, | ||
$debug: { | ||
...s.$debug, | ||
route, | ||
}, | ||
})); | ||
}; | ||
const eventDispatcher = document.body.dispatchEvent; | ||
const debugApi = { | ||
debug: debugApiVersion, | ||
instance: { | ||
@@ -30,2 +186,150 @@ name: process.env.BUILD_PCKG_NAME, | ||
}; | ||
const start = () => { | ||
const registeredRoutes = context.readState((state) => Object.keys(state.registry.pages)); | ||
const componentRoutes = context.readState((state) => Object.keys(state.routes)); | ||
const routes = [...componentRoutes, ...registeredRoutes]; | ||
const container = JSON.parse(JSON.stringify(context.readState((s) => s))); | ||
const pilets = context | ||
.readState((m) => m.modules) | ||
.map((pilet: any) => ({ | ||
name: pilet.name, | ||
version: pilet.version, | ||
disabled: pilet.disabled, | ||
})); | ||
sendMessage({ | ||
type: 'available', | ||
name: debugApi.instance.name, | ||
version: debugApi.instance.version, | ||
kind: debugApiVersion, | ||
capabilities: ['events', 'container', 'routes', 'pilets', 'settings'], | ||
state: { | ||
routes, | ||
pilets, | ||
container, | ||
settings, | ||
events, | ||
}, | ||
}); | ||
}; | ||
document.body.dispatchEvent = function (ev: CustomEvent) { | ||
if (ev.type.startsWith('piral-')) { | ||
events.unshift({ | ||
id: events.length.toString(), | ||
name: ev.type.replace('piral-', ''), | ||
args: ev.detail.arg, | ||
time: Date.now(), | ||
}); | ||
sendMessage({ | ||
events, | ||
type: 'events', | ||
}); | ||
} | ||
return eventDispatcher.call(this, ev); | ||
}; | ||
context.dispatch((s) => ({ | ||
...s, | ||
$debug: { | ||
visualize: { | ||
active: settings.viewOrigins.value, | ||
force: false, | ||
}, | ||
route: undefined, | ||
}, | ||
components: { | ||
...s.components, | ||
Debug: DebugTracker, | ||
}, | ||
registry: { | ||
...s.registry, | ||
wrappers: { | ||
...s.registry.wrappers, | ||
'*': VisualizationWrapper, | ||
}, | ||
}, | ||
})); | ||
window.addEventListener('storage', (event) => { | ||
if (event.storageArea === sessionStorage) { | ||
// potentially unknowingly updated settings | ||
updateSettings({ | ||
viewState: sessionStorage.getItem('dbg:view-state') !== 'off', | ||
loadPilets: sessionStorage.getItem('dbg:load-pilets') === 'on', | ||
hardRefresh: sessionStorage.getItem('dbg:hard-refresh') === 'on', | ||
viewOrigins: sessionStorage.getItem('dbg:view-origins') === 'on', | ||
}); | ||
} | ||
}); | ||
window.addEventListener('message', (event) => { | ||
const { source, version, content } = event.data; | ||
if (source !== selfSource && version === debugApiVersion) { | ||
switch (content.type) { | ||
case 'init': | ||
return start(); | ||
case 'update-settings': | ||
return updateSettings(content.settings); | ||
case 'append-pilet': | ||
return appendPilet(content.meta); | ||
case 'remove-pilet': | ||
return removePilet(content.name); | ||
case 'toggle-pilet': | ||
return togglePilet(content.name); | ||
case 'emit-event': | ||
return context.emit(content.name, content.args); | ||
case 'goto-route': | ||
return goToRoute(content.route); | ||
case 'visualize-all': | ||
return toggleVisualize(); | ||
} | ||
} | ||
}); | ||
if (isfunc(onChange)) { | ||
onChange((previous, current) => { | ||
if (settings.viewState) { | ||
const infos = new Error().stack; | ||
if (infos) { | ||
// Chrome, Firefox, ... (full capability) | ||
const lastLine = infos.split('\n')[7]; | ||
if (lastLine) { | ||
const action = lastLine.replace(/^\s+at\s+(Atom\.|Object\.)?/, ''); | ||
console.group( | ||
`%c Piral State Change %c ${new Date().toLocaleTimeString()}`, | ||
'color: gray; font-weight: lighter;', | ||
'color: black; font-weight: bold;', | ||
); | ||
console.log('%c Previous', `color: #9E9E9E; font-weight: bold`, previous); | ||
console.log('%c Action', `color: #03A9F4; font-weight: bold`, action); | ||
console.log('%c Next', `color: #4CAF50; font-weight: bold`, current); | ||
console.groupEnd(); | ||
} | ||
} else { | ||
// IE 11, ... (does not know colors etc.) | ||
console.log('Changed state', previous, current); | ||
} | ||
} | ||
if (current.modules !== previous.modules) { | ||
sendCurrentPilets(current.modules); | ||
} | ||
if (current.registry.pages !== previous.registry.pages || current.routes !== previous.routes) { | ||
sendCurrentRoutes(current.registry.pages, current.routes); | ||
} | ||
sendCurrentContainer(current); | ||
}); | ||
} | ||
window['dbg:piral'] = debugApi; | ||
start(); | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 6 instances in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
92354
45
1510
12
3