{{ statusMessage }}
+
- Livewire is detected on this page. - Devtools inspection is not available because it's in - production mode or explicitly disabled by the author. -
diff --git a/shells/chrome/popups/enabled.html b/shells/chrome/popups/enabled.html deleted file mode 100644 index 3b102e0..0000000 --- a/shells/chrome/popups/enabled.html +++ /dev/null @@ -1,5 +0,0 @@ - -- Livewire is detected on this page. - Open DevTools and look for the Livewire panel. -
diff --git a/shells/chrome/popups/not-found.html b/shells/chrome/popups/not-found.html deleted file mode 100644 index 7c7d7a5..0000000 --- a/shells/chrome/popups/not-found.html +++ /dev/null @@ -1,4 +0,0 @@ - -- Livewire is not detected -
diff --git a/shells/chrome/src/backend.js b/shells/chrome/src/backend.js deleted file mode 100644 index 2606dbe..0000000 --- a/shells/chrome/src/backend.js +++ /dev/null @@ -1,40 +0,0 @@ -// this is injected to the app page when the panel is activated. - -import { initBackend } from 'src/backend' -import Bridge from 'src/bridge' - -window.addEventListener('message', handshake) - -function handshake (e) { - if (e.data.source === 'livewire-devtools-proxy' && e.data.payload === 'init') { - window.removeEventListener('message', handshake) - - let listeners = [] - const bridge = new Bridge({ - listen (fn) { - var listener = evt => { - if (evt.data.source === 'livewire-devtools-proxy' && evt.data.payload) { - fn(evt.data.payload) - } - } - window.addEventListener('message', listener) - listeners.push(listener) - }, - send (data) { - window.postMessage({ - source: 'livewire-devtools-backend', - payload: data - }, '*') - } - }) - - bridge.on('shutdown', () => { - listeners.forEach(l => { - window.removeEventListener('message', l) - }) - listeners = [] - }) - - initBackend(bridge) - } -} diff --git a/shells/chrome/src/detector-exec.js b/shells/chrome/src/detector-exec.js deleted file mode 100644 index 98738e5..0000000 --- a/shells/chrome/src/detector-exec.js +++ /dev/null @@ -1,39 +0,0 @@ -import { installToast } from 'src/backend/toast' -import { isFirefox } from 'src/devtools/env' -// import { detect } from 'src/backend/detect' - -function detect (win) { - setTimeout(() => { - if (!win.Livewire) { - return; - } - win.postMessage({ - livewireDetected: true, - devToolsEnabled: win.Livewire.devToolsEnabled || true, //TODO: check new API, not exist anymore - }, '*') - - win.__LIVEWIRE_DEVTOOLS_GLOBAL_HOOK__.emit('init', win.Livewire); - }, 100) -} - -// function installScript (fn) { -// const source = ';(' + fn.toString() + ')(window)' - -// if (isFirefox) { -// // eslint-disable-next-line no-eval -// window.eval(source) // in Firefox, this evaluates on the content window -// } else { -// const script = document.createElement('script') -// script.src = chrome.runtime.getURL('build/detector-exec.js') -// script.onload = () => { -// script.remove() -// } -// ;(document.head || document.documentElement).appendChild(script) -// } -// } - -// inject the hook -if (document instanceof HTMLDocument) { - detect(window) - installToast(window) -} diff --git a/shells/chrome/src/detector.js b/shells/chrome/src/detector.js deleted file mode 100644 index 43f805e..0000000 --- a/shells/chrome/src/detector.js +++ /dev/null @@ -1,12 +0,0 @@ -window.addEventListener('message', e => { - if (e.source === window && e.data.livewireDetected) { - chrome.runtime.sendMessage(e.data) - } -}) - -const script = document.createElement('script') -script.src = chrome.runtime.getURL('build/detector-exec.js') -script.onload = () => { - script.remove() -} -;(document.head || document.documentElement).appendChild(script) diff --git a/shells/chrome/src/devtools-background.js b/shells/chrome/src/devtools-background.js deleted file mode 100644 index a96b737..0000000 --- a/shells/chrome/src/devtools-background.js +++ /dev/null @@ -1,125 +0,0 @@ -// This is the devtools script, which is called when the user opens the -// Chrome devtool on a page. We check to see if we global hook has detected -// Vue presence on the page. If yes, create the Vue panel; otherwise poll -// for 10 seconds. - -let panelLoaded = false -let panelShown = false -let pendingAction -let created = false -let checkCount = 0 - -chrome.devtools.network.onNavigated.addListener(createPanelIfHasLivewire) -const checkLivewireInterval = setInterval(createPanelIfHasLivewire, 1000) -createPanelIfHasLivewire() - -function createPanelIfHasLivewire () { - if (created || checkCount++ > 10) { - return - } - panelLoaded = false - panelShown = false - chrome.devtools.inspectedWindow.eval( - '!!(window.__LIVEWIRE_DEVTOOLS_GLOBAL_HOOK__.Livewire)', - function (hasLivewire) { - if (!hasLivewire || created) { - return - } - clearInterval(checkLivewireInterval) - created = true - chrome.devtools.panels.create( - 'Livewire', 'icons/128.png', 'devtools.html', - panel => { - // panel loaded - panel.onShown.addListener(onPanelShown) - panel.onHidden.addListener(onPanelHidden) - } - ) - } - ) -} - -// Runtime messages - -chrome.runtime.onMessage.addListener(request => { - if (request === 'vue-panel-load') { - onPanelLoad() - } else if (request.vueToast) { - toast(request.vueToast.message, request.vueToast.type) - } else if (request.vueContextMenu) { - onContextMenu(request.vueContextMenu) - } -}) - -// Page context menu entry - -function onContextMenu ({ id }) { - if (id === 'inspect-instance') { - const src = `window.__LIVEWIRE_DEVTOOLS_GLOBAL_HOOK__` - - chrome.devtools.inspectedWindow.eval(src, function (res, err) { - if (err) { - console.log(err) - } - if (typeof res !== 'undefined' && res) { - panelAction(() => { - chrome.runtime.sendMessage('get-context-menu-target') - }, 'Open Livewire devtools to see component details') - } else { - pendingAction = null - toast('No Livewire component was found', 'warn') - } - }) - } -} - -// Action that may execute immediatly -// or later when the Vue panel is ready - -function panelAction (cb, message = null) { - if (created && panelLoaded && panelShown) { - cb() - } else { - pendingAction = cb - message && toast(message) - } -} - -function executePendingAction () { - pendingAction && pendingAction() - pendingAction = null -} - -// Execute pending action when Vue panel is ready - -function onPanelLoad () { - executePendingAction() - panelLoaded = true -} - -// Manage panel visibility - -function onPanelShown () { - chrome.runtime.sendMessage('vue-panel-shown') - panelShown = true - panelLoaded && executePendingAction() -} - -function onPanelHidden () { - chrome.runtime.sendMessage('vue-panel-hidden') - panelShown = false -} - -// Toasts - -function toast (message, type = 'normal') { - const src = `(function() { - __LIVEWIRE_DEVTOOLS_TOAST__(\`${message}\`, '${type}'); - })()` - - chrome.devtools.inspectedWindow.eval(src, function (res, err) { - if (err) { - console.log(err) - } - }) -} diff --git a/shells/chrome/src/devtools.js b/shells/chrome/src/devtools.js deleted file mode 100644 index ce42483..0000000 --- a/shells/chrome/src/devtools.js +++ /dev/null @@ -1,75 +0,0 @@ -// this script is called when the VueDevtools panel is activated. - -import { initDevTools } from 'src/devtools' -import Bridge from 'src/bridge' - -initDevTools({ - - /** - * Inject backend, connect to background, and send back the bridge. - * - * @param {Function} cb - */ - - connect (cb) { - // 1. inject backend code into page - injectScript(chrome.runtime.getURL('build/backend.js'), () => { - // 2. connect to background to setup proxy - const port = chrome.runtime.connect({ - name: '' + chrome.devtools.inspectedWindow.tabId - }) - let disconnected = false - port.onDisconnect.addListener(() => { - disconnected = true - }) - - const bridge = new Bridge({ - listen (fn) { - port.onMessage.addListener(fn) - }, - send (data) { - if (!disconnected) { - port.postMessage(data) - } - } - }) - // 3. send a proxy API to the panel - cb(bridge) - }) - }, - - /** - * Register a function to reload the devtools app. - * - * @param {Function} reloadFn - */ - - onReload (reloadFn) { - chrome.devtools.network.onNavigated.addListener(reloadFn) - } -}) - -/** - * Inject a globally evaluated script, in the same context with the actual - * user app. - * - * @param {String} scriptName - * @param {Function} cb - */ - -function injectScript (scriptName, cb) { - const src = ` - (function() { - var script = document.constructor.prototype.createElement.call(document, 'script'); - script.src = "${scriptName}"; - document.documentElement.appendChild(script); - script.parentNode.removeChild(script); - })() - ` - chrome.devtools.inspectedWindow.eval(src, function (res, err) { - if (err) { - console.log(err) - } - cb() - }) -} diff --git a/shells/chrome/src/hook-exec.js b/shells/chrome/src/hook-exec.js deleted file mode 100644 index 2454368..0000000 --- a/shells/chrome/src/hook-exec.js +++ /dev/null @@ -1,3 +0,0 @@ -import { installHook } from 'src/backend/hook' - -installHook(window) diff --git a/shells/chrome/src/hook.js b/shells/chrome/src/hook.js deleted file mode 100644 index 16269d7..0000000 --- a/shells/chrome/src/hook.js +++ /dev/null @@ -1,6 +0,0 @@ -const script = document.createElement('script') -script.src = chrome.runtime.getURL('build/hook-exec.js') -script.onload = () => { - script.remove() -} -;(document.head || document.documentElement).appendChild(script) diff --git a/shells/chrome/src/proxy.js b/shells/chrome/src/proxy.js deleted file mode 100644 index 918f334..0000000 --- a/shells/chrome/src/proxy.js +++ /dev/null @@ -1,36 +0,0 @@ -// This is a content-script that is injected only when the devtools are -// activated. Because it is not injected using eval, it has full privilege -// to the chrome runtime API. It serves as a proxy between the injected -// backend and the Vue devtools panel. - -const port = chrome.runtime.connect({ - name: 'content-script' -}) - -port.onMessage.addListener(sendMessageToBackend) -window.addEventListener('message', sendMessageToDevtools) -port.onDisconnect.addListener(handleDisconnect) - -sendMessageToBackend('init') - -function sendMessageToBackend (payload) { - window.postMessage({ - source: 'livewire-devtools-proxy', - payload: payload - }, '*') -} - -function sendMessageToDevtools (e) { - if (e.data && e.data.source === 'livewire-devtools-backend') { - port.postMessage(e.data.payload) - } else if (e.data && e.data.source === 'livewire-devtools-backend-injection') { - if (e.data.payload === 'listening') { - sendMessageToBackend('init') - } - } -} - -function handleDisconnect () { - window.removeEventListener('message', sendMessageToDevtools) - sendMessageToBackend('shutdown') -} diff --git a/shells/chrome/src/service-worker.js b/shells/chrome/src/service-worker.js deleted file mode 100644 index f921262..0000000 --- a/shells/chrome/src/service-worker.js +++ /dev/null @@ -1,100 +0,0 @@ -// the background script runs all the time and serves as a central message -// hub for each vue devtools (panel + proxy + backend) instance. -const ports = {} - -chrome.runtime.onConnect.addListener(port => { - let tab - let name - if (isNumeric(port.name)) { - tab = port.name - name = 'devtools' - installProxy(+port.name) - } else { - tab = port.sender.tab.id - name = 'backend' - } - - if (!ports[tab]) { - ports[tab] = { - devtools: null, - backend: null - } - } - ports[tab][name] = port - - if (ports[tab].devtools && ports[tab].backend) { - doublePipe(tab, ports[tab].devtools, ports[tab].backend) - } -}) - -function isNumeric (str) { - return +str + '' === str -} - -function installProxy (tab) { - chrome.scripting.executeScript({ - target: { tabId: tab }, - files: ['build/proxy.js'] - }, - (res) => { - if (!res) { - ports[tab].devtools.postMessage('proxy-fail') - } else { - console.log('injected proxy to tab ' + tab) - } - } - ) -} - -function doublePipe (id, one, two) { - one.onMessage.addListener(lOne) - function lOne (message) { - if (message.event === 'log') { - return console.log('tab ' + id, message.payload) - } - console.log('devtools -> backend', message) - two.postMessage(message) - } - two.onMessage.addListener(lTwo) - function lTwo (message) { - if (message.event === 'log') { - return console.log('tab ' + id, message.payload) - } - console.log('backend -> devtools', message) - one.postMessage(message) - } - function shutdown () { - console.log('tab ' + id + ' disconnected.') - one.onMessage.removeListener(lOne) - two.onMessage.removeListener(lTwo) - one.disconnect() - two.disconnect() - ports[id] = null - } - one.onDisconnect.addListener(shutdown) - two.onDisconnect.addListener(shutdown) - console.log('tab ' + id + ' connected.') -} - -chrome.runtime.onMessage.addListener((req, sender) => { - if (sender.tab && req.livewireDetected) { - chrome.action.setIcon({ - tabId: sender.tab.id, - path: { - 16: '/icons/16.png', - 48: '/icons/48.png', - 128: '/icons/128.png' - } - }) - chrome.action.setPopup({ - tabId: sender.tab.id, - popup: req.devToolsEnabled ? 'popups/enabled.html' : 'popups/disabled.html' - }) - } -}) - -// Right-click inspect context menu entry -let activeTabId -chrome.tabs.onActivated.addListener(({ tabId }) => { - activeTabId = tabId -}) diff --git a/shells/chrome/webpack.config.js b/shells/chrome/webpack.config.js deleted file mode 100644 index 7b9f0fa..0000000 --- a/shells/chrome/webpack.config.js +++ /dev/null @@ -1,23 +0,0 @@ -const path = require('path') -const createConfig = require('../createConfig') - -module.exports = createConfig({ - entry: { - hook: './src/hook.js', - 'hook-exec': './src/hook-exec.js', - devtools: './src/devtools.js', - 'service-worker': './src/service-worker.js', - 'devtools-background': './src/devtools-background.js', - backend: './src/backend.js', - proxy: './src/proxy.js', - detector: './src/detector.js', - 'detector-exec': './src/detector-exec.js' - }, - output: { - path: path.join(__dirname, 'build'), - filename: '[name].js' - }, - devtool: process.env.NODE_ENV !== 'production' - ? '#inline-source-map' - : false -}) diff --git a/shells/createConfig.js b/shells/createConfig.js deleted file mode 100644 index 61f495c..0000000 --- a/shells/createConfig.js +++ /dev/null @@ -1,90 +0,0 @@ -const path = require('path') -const webpack = require('webpack') -const merge = require('webpack-merge') -const { VueLoaderPlugin } = require('vue-loader') -const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') - -module.exports = (config, target = { chrome: 52, firefox: 48 }) => { - const bubleOptions = { - target, - objectAssign: 'Object.assign', - transforms: { - forOf: false, - modules: false - } - } - - const baseConfig = { - resolve: { - alias: { - src: path.resolve(__dirname, '../src'), - views: path.resolve(__dirname, '../src/devtools/views'), - components: path.resolve(__dirname, '../src/devtools/components') - } - }, - module: { - rules: [ - { - test: /\.js$/, - loader: 'buble-loader', - exclude: /node_modules|vue\/dist|vuex\/dist/, - options: bubleOptions - }, - { - test: /\.vue$/, - loader: 'vue-loader', - options: { - compilerOptions: { - preserveWhitespace: false - }, - transpileOptions: bubleOptions - } - }, - { - test: /\.css$/, - use: [ - 'vue-style-loader', - 'css-loader' - ] - }, - { - test: /\.styl(us)?$/, - use: [ - 'vue-style-loader', - 'css-loader', - 'stylus-loader' - ] - }, - { - test: /\.(png|woff2)$/, - loader: 'url-loader?limit=0' - } - ] - }, - performance: { - hints: false - }, - plugins: [ - new VueLoaderPlugin(), - ...(process.env.VUE_DEVTOOL_TEST ? [] : [new FriendlyErrorsPlugin()]), - new webpack.DefinePlugin({ - 'process.env.RELEASE_CHANNEL': JSON.stringify(process.env.RELEASE_CHANNEL || 'stable') - }) - ], - devServer: { - port: process.env.PORT - } - } - - if (process.env.NODE_ENV === 'production') { - const UglifyPlugin = require('uglifyjs-webpack-plugin') - baseConfig.plugins.push( - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': '"production"' - }), - new UglifyPlugin() - ) - } - - return merge(baseConfig, config) -} diff --git a/shells/dev/index.html b/shells/dev/index.html deleted file mode 100644 index e6982fc..0000000 --- a/shells/dev/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - -{{ count }}
- - - -Your counter is {{ $store.getters.isPositive ? 'positive' : 'negative' }}
-Date: {{ date.toString() }} - Hours: {{ hours }} - Prototype: {{ date | prototypeString }}
- -- -
- -- - -
- -{{ setDisplay() }}
-
- {{ mapDisplay() }}
-
- - - - -
-{{ $route.params.id }}
-- Livewire is detected on this page. - Devtools inspection is not available because it's in - production mode or explicitly disabled by the author. -
diff --git a/shells/firefox/popups/enabled.html b/shells/firefox/popups/enabled.html deleted file mode 100644 index 3b102e0..0000000 --- a/shells/firefox/popups/enabled.html +++ /dev/null @@ -1,5 +0,0 @@ - -- Livewire is detected on this page. - Open DevTools and look for the Livewire panel. -
diff --git a/shells/firefox/popups/not-found.html b/shells/firefox/popups/not-found.html deleted file mode 100644 index 7490fa8..0000000 --- a/shells/firefox/popups/not-found.html +++ /dev/null @@ -1,4 +0,0 @@ - -- Livewire not detected -
diff --git a/shells/firefox/src/backend.js b/shells/firefox/src/backend.js deleted file mode 100644 index 2606dbe..0000000 --- a/shells/firefox/src/backend.js +++ /dev/null @@ -1,40 +0,0 @@ -// this is injected to the app page when the panel is activated. - -import { initBackend } from 'src/backend' -import Bridge from 'src/bridge' - -window.addEventListener('message', handshake) - -function handshake (e) { - if (e.data.source === 'livewire-devtools-proxy' && e.data.payload === 'init') { - window.removeEventListener('message', handshake) - - let listeners = [] - const bridge = new Bridge({ - listen (fn) { - var listener = evt => { - if (evt.data.source === 'livewire-devtools-proxy' && evt.data.payload) { - fn(evt.data.payload) - } - } - window.addEventListener('message', listener) - listeners.push(listener) - }, - send (data) { - window.postMessage({ - source: 'livewire-devtools-backend', - payload: data - }, '*') - } - }) - - bridge.on('shutdown', () => { - listeners.forEach(l => { - window.removeEventListener('message', l) - }) - listeners = [] - }) - - initBackend(bridge) - } -} diff --git a/shells/firefox/src/background.js b/shells/firefox/src/background.js deleted file mode 100644 index 5591018..0000000 --- a/shells/firefox/src/background.js +++ /dev/null @@ -1,98 +0,0 @@ -// the background script runs all the time and serves as a central message -// hub for each vue devtools (panel + proxy + backend) instance. - -const ports = {} - -chrome.runtime.onConnect.addListener(port => { - let tab - let name - if (isNumeric(port.name)) { - tab = port.name - name = 'devtools' - installProxy(+port.name) - } else { - tab = port.sender.tab.id - name = 'backend' - } - - if (!ports[tab]) { - ports[tab] = { - devtools: null, - backend: null - } - } - ports[tab][name] = port - - if (ports[tab].devtools && ports[tab].backend) { - doublePipe(tab, ports[tab].devtools, ports[tab].backend) - } -}) - -function isNumeric (str) { - return +str + '' === str -} - -function installProxy (tabId) { - chrome.tabs.executeScript(tabId, { - file: '/build/proxy.js' - }, function (res) { - if (!res) { - ports[tabId].devtools.postMessage('proxy-fail') - } else { - console.log('injected proxy to tab ' + tabId) - } - }) -} - -function doublePipe (id, one, two) { - one.onMessage.addListener(lOne) - function lOne (message) { - if (message.event === 'log') { - return console.log('tab ' + id, message.payload) - } - console.log('devtools -> backend', message) - two.postMessage(message) - } - two.onMessage.addListener(lTwo) - function lTwo (message) { - if (message.event === 'log') { - return console.log('tab ' + id, message.payload) - } - console.log('backend -> devtools', message) - one.postMessage(message) - } - function shutdown () { - console.log('tab ' + id + ' disconnected.') - one.onMessage.removeListener(lOne) - two.onMessage.removeListener(lTwo) - one.disconnect() - two.disconnect() - ports[id] = null - } - one.onDisconnect.addListener(shutdown) - two.onDisconnect.addListener(shutdown) - console.log('tab ' + id + ' connected.') -} - -chrome.runtime.onMessage.addListener((req, sender) => { - if (sender.tab && req.livewireDetected) { - chrome.browserAction.setIcon({ - tabId: sender.tab.id, - path: { - 16: `icons/16.png`, - 48: `icons/48.png`, - 128: `icons/128.png` - } - }) - chrome.browserAction.setPopup({ - tabId: sender.tab.id, - popup: req.devToolsEnabled ? `popups/enabled.html` : `popups/disabled.html` - }) - } -}) - -// Right-click inspect context menu entry -let activeTabId -chrome.tabs.onActivated.addListener(({ tabId }) => { - activeTabId = tabId -}) diff --git a/shells/firefox/src/detector.js b/shells/firefox/src/detector.js deleted file mode 100644 index 790d396..0000000 --- a/shells/firefox/src/detector.js +++ /dev/null @@ -1,42 +0,0 @@ -import { installToast } from 'src/backend/toast' -import { isFirefox } from 'src/devtools/env' - -window.addEventListener('message', e => { - if (e.source === window && e.data.livewireDetected) { - chrome.runtime.sendMessage(e.data) - } -}) - -function detect (win) { - setTimeout(() => { - if (!win.Livewire) { - return; - } - win.postMessage({ - livewireDetected: true, - devToolsEnabled: win.Livewire.devToolsEnabled || false - }, '*') - - win.__LIVEWIRE_DEVTOOLS_GLOBAL_HOOK__.emit('init', win.Livewire); - }, 100) -} - -// inject the hook -if (document instanceof HTMLDocument) { - installScript(detect) - installScript(installToast) -} - -function installScript (fn) { - const source = ';(' + fn.toString() + ')(window)' - - if (isFirefox) { - // eslint-disable-next-line no-eval - window.eval(source) // in Firefox, this evaluates on the content window - } else { - const script = document.createElement('script') - script.textContent = source - document.documentElement.appendChild(script) - script.parentNode.removeChild(script) - } -} diff --git a/shells/firefox/src/devtools-background.js b/shells/firefox/src/devtools-background.js deleted file mode 100644 index a96b737..0000000 --- a/shells/firefox/src/devtools-background.js +++ /dev/null @@ -1,125 +0,0 @@ -// This is the devtools script, which is called when the user opens the -// Chrome devtool on a page. We check to see if we global hook has detected -// Vue presence on the page. If yes, create the Vue panel; otherwise poll -// for 10 seconds. - -let panelLoaded = false -let panelShown = false -let pendingAction -let created = false -let checkCount = 0 - -chrome.devtools.network.onNavigated.addListener(createPanelIfHasLivewire) -const checkLivewireInterval = setInterval(createPanelIfHasLivewire, 1000) -createPanelIfHasLivewire() - -function createPanelIfHasLivewire () { - if (created || checkCount++ > 10) { - return - } - panelLoaded = false - panelShown = false - chrome.devtools.inspectedWindow.eval( - '!!(window.__LIVEWIRE_DEVTOOLS_GLOBAL_HOOK__.Livewire)', - function (hasLivewire) { - if (!hasLivewire || created) { - return - } - clearInterval(checkLivewireInterval) - created = true - chrome.devtools.panels.create( - 'Livewire', 'icons/128.png', 'devtools.html', - panel => { - // panel loaded - panel.onShown.addListener(onPanelShown) - panel.onHidden.addListener(onPanelHidden) - } - ) - } - ) -} - -// Runtime messages - -chrome.runtime.onMessage.addListener(request => { - if (request === 'vue-panel-load') { - onPanelLoad() - } else if (request.vueToast) { - toast(request.vueToast.message, request.vueToast.type) - } else if (request.vueContextMenu) { - onContextMenu(request.vueContextMenu) - } -}) - -// Page context menu entry - -function onContextMenu ({ id }) { - if (id === 'inspect-instance') { - const src = `window.__LIVEWIRE_DEVTOOLS_GLOBAL_HOOK__` - - chrome.devtools.inspectedWindow.eval(src, function (res, err) { - if (err) { - console.log(err) - } - if (typeof res !== 'undefined' && res) { - panelAction(() => { - chrome.runtime.sendMessage('get-context-menu-target') - }, 'Open Livewire devtools to see component details') - } else { - pendingAction = null - toast('No Livewire component was found', 'warn') - } - }) - } -} - -// Action that may execute immediatly -// or later when the Vue panel is ready - -function panelAction (cb, message = null) { - if (created && panelLoaded && panelShown) { - cb() - } else { - pendingAction = cb - message && toast(message) - } -} - -function executePendingAction () { - pendingAction && pendingAction() - pendingAction = null -} - -// Execute pending action when Vue panel is ready - -function onPanelLoad () { - executePendingAction() - panelLoaded = true -} - -// Manage panel visibility - -function onPanelShown () { - chrome.runtime.sendMessage('vue-panel-shown') - panelShown = true - panelLoaded && executePendingAction() -} - -function onPanelHidden () { - chrome.runtime.sendMessage('vue-panel-hidden') - panelShown = false -} - -// Toasts - -function toast (message, type = 'normal') { - const src = `(function() { - __LIVEWIRE_DEVTOOLS_TOAST__(\`${message}\`, '${type}'); - })()` - - chrome.devtools.inspectedWindow.eval(src, function (res, err) { - if (err) { - console.log(err) - } - }) -} diff --git a/shells/firefox/src/devtools.js b/shells/firefox/src/devtools.js deleted file mode 100644 index ce42483..0000000 --- a/shells/firefox/src/devtools.js +++ /dev/null @@ -1,75 +0,0 @@ -// this script is called when the VueDevtools panel is activated. - -import { initDevTools } from 'src/devtools' -import Bridge from 'src/bridge' - -initDevTools({ - - /** - * Inject backend, connect to background, and send back the bridge. - * - * @param {Function} cb - */ - - connect (cb) { - // 1. inject backend code into page - injectScript(chrome.runtime.getURL('build/backend.js'), () => { - // 2. connect to background to setup proxy - const port = chrome.runtime.connect({ - name: '' + chrome.devtools.inspectedWindow.tabId - }) - let disconnected = false - port.onDisconnect.addListener(() => { - disconnected = true - }) - - const bridge = new Bridge({ - listen (fn) { - port.onMessage.addListener(fn) - }, - send (data) { - if (!disconnected) { - port.postMessage(data) - } - } - }) - // 3. send a proxy API to the panel - cb(bridge) - }) - }, - - /** - * Register a function to reload the devtools app. - * - * @param {Function} reloadFn - */ - - onReload (reloadFn) { - chrome.devtools.network.onNavigated.addListener(reloadFn) - } -}) - -/** - * Inject a globally evaluated script, in the same context with the actual - * user app. - * - * @param {String} scriptName - * @param {Function} cb - */ - -function injectScript (scriptName, cb) { - const src = ` - (function() { - var script = document.constructor.prototype.createElement.call(document, 'script'); - script.src = "${scriptName}"; - document.documentElement.appendChild(script); - script.parentNode.removeChild(script); - })() - ` - chrome.devtools.inspectedWindow.eval(src, function (res, err) { - if (err) { - console.log(err) - } - cb() - }) -} diff --git a/shells/firefox/src/hook.js b/shells/firefox/src/hook.js deleted file mode 100644 index f12ade9..0000000 --- a/shells/firefox/src/hook.js +++ /dev/null @@ -1,18 +0,0 @@ -// This script is injected into every page. -import { installHook } from 'src/backend/hook' -import { isFirefox } from 'src/devtools/env' - -// inject the hook -if (document instanceof HTMLDocument) { - const source = ';(' + installHook.toString() + ')(window)' - - if (isFirefox) { - // eslint-disable-next-line no-eval - window.eval(source) // in Firefox, this evaluates on the content window - } else { - const script = document.createElement('script') - script.textContent = source - document.documentElement.appendChild(script) - script.parentNode.removeChild(script) - } -} diff --git a/shells/firefox/src/proxy.js b/shells/firefox/src/proxy.js deleted file mode 100644 index 7e26f73..0000000 --- a/shells/firefox/src/proxy.js +++ /dev/null @@ -1,32 +0,0 @@ -// This is a content-script that is injected only when the devtools are -// activated. Because it is not injected using eval, it has full privilege -// to the chrome runtime API. It serves as a proxy between the injected -// backend and the Vue devtools panel. - -const port = chrome.runtime.connect({ - name: 'content-script' -}) - -port.onMessage.addListener(sendMessageToBackend) -window.addEventListener('message', sendMessageToDevtools) -port.onDisconnect.addListener(handleDisconnect) - -sendMessageToBackend('init') - -function sendMessageToBackend (payload) { - window.postMessage({ - source: 'livewire-devtools-proxy', - payload: payload - }, '*') -} - -function sendMessageToDevtools (e) { - if (e.data && e.data.source === 'livewire-devtools-backend') { - port.postMessage(e.data.payload) - } -} - -function handleDisconnect () { - window.removeEventListener('message', sendMessageToDevtools) - sendMessageToBackend('shutdown') -} diff --git a/shells/firefox/webpack.config.js b/shells/firefox/webpack.config.js deleted file mode 100644 index 574fa96..0000000 --- a/shells/firefox/webpack.config.js +++ /dev/null @@ -1,21 +0,0 @@ -const path = require('path') -const createConfig = require('../createConfig') - -module.exports = createConfig({ - entry: { - hook: './src/hook.js', - devtools: './src/devtools.js', - background: './src/background.js', - 'devtools-background': './src/devtools-background.js', - backend: './src/backend.js', - proxy: './src/proxy.js', - detector: './src/detector.js' - }, - output: { - path: path.join(__dirname, 'build'), - filename: '[name].js' - }, - devtool: process.env.NODE_ENV !== 'production' - ? '#inline-source-map' - : false -}) diff --git a/src/.eslintrc.js b/src/.eslintrc.js deleted file mode 100644 index d81a8ef..0000000 --- a/src/.eslintrc.js +++ /dev/null @@ -1,11 +0,0 @@ -module.exports = { - rules: { - 'no-restricted-syntax': [ - 'error', - { - selector: 'ForOfStatement', - message: 'Not supported by bublé' - } - ] - } -} diff --git a/src/adapter/detect.spec.ts b/src/adapter/detect.spec.ts new file mode 100644 index 0000000..ca94cd4 --- /dev/null +++ b/src/adapter/detect.spec.ts @@ -0,0 +1,56 @@ +import { describe, expect, it } from 'vitest' +import { detectAlpine, detectLivewireVersion, isDevToolsEnabled } from './detect' + +describe('detectLivewireVersion', () => { + it('returns 4 when Livewire.interceptMessage exists', () => { + expect(detectLivewireVersion({ interceptMessage: () => {}, all: () => [], hook: () => {} })).toBe(4) + }) + + it('returns 4 when interceptRequest exists', () => { + expect(detectLivewireVersion({ interceptRequest: () => {} })).toBe(4) + }) + + it('returns 3 when .all + .hook exist without intercept APIs', () => { + expect(detectLivewireVersion({ all: () => [], hook: () => {} })).toBe(3) + }) + + it('returns 3 when first() returns a snapshot-having component', () => { + expect(detectLivewireVersion({ first: () => ({ snapshot: {} }) })).toBe(3) + }) + + it('throws on pre-3 Livewire / nothing recognisable', () => { + expect(() => detectLivewireVersion({})).toThrow() + expect(() => detectLivewireVersion(null)).toThrow() + }) +}) + +describe('detectAlpine', () => { + it('reports present with version when window.Alpine exists', () => { + const win = { Alpine: { version: '3.15.0' } } as unknown as Window + expect(detectAlpine(win)).toEqual({ present: true, version: '3.15.0' }) + }) + + it('reports absent when window.Alpine is missing', () => { + expect(detectAlpine({} as unknown as Window)).toEqual({ + present: false, + version: null + }) + }) + + it('reports present: true but null version when Alpine has no .version', () => { + const win = { Alpine: {} } as unknown as Window + expect(detectAlpine(win)).toEqual({ present: true, version: null }) + }) +}) + +describe('isDevToolsEnabled', () => { + it('true when devToolsEnabled is undefined (v3/v4 default)', () => { + expect(isDevToolsEnabled({})).toBe(true) + }) + it('true when explicitly true', () => { + expect(isDevToolsEnabled({ devToolsEnabled: true })).toBe(true) + }) + it('false only when explicitly false', () => { + expect(isDevToolsEnabled({ devToolsEnabled: false })).toBe(false) + }) +}) diff --git a/src/adapter/detect.ts b/src/adapter/detect.ts new file mode 100644 index 0000000..57ce2b1 --- /dev/null +++ b/src/adapter/detect.ts @@ -0,0 +1,31 @@ +import type { AlpineInfo, LivewireVersion } from './types' + +export function detectLivewireVersion(L: any): LivewireVersion { + if (!L) throw new Error('Livewire is not on the page') + + if (typeof L.interceptMessage === 'function' || typeof L.interceptRequest === 'function') { + return 4 + } + + if (typeof L.all === 'function' && typeof L.hook === 'function') { + return 3 + } + + const first = typeof L.first === 'function' ? L.first() : null + if (first?.snapshot) return 3 + + throw new Error('Unsupported Livewire version (pre-3 not supported)') +} + +export function detectAlpine(win: Window): AlpineInfo { + const A = (win as any).Alpine + if (!A) return { present: false, version: null } + return { + present: true, + version: typeof A.version === 'string' ? A.version : null + } +} + +export function isDevToolsEnabled(L: any): boolean { + return L?.devToolsEnabled !== false +} diff --git a/src/adapter/index.ts b/src/adapter/index.ts new file mode 100644 index 0000000..5fc716a --- /dev/null +++ b/src/adapter/index.ts @@ -0,0 +1,17 @@ +import type { LivewireAdapter } from './types' +import { detectLivewireVersion } from './detect' +import { createV3Adapter } from './v3' +import { createV4Adapter } from './v4' + +export function createAdapter(Livewire: any): LivewireAdapter { + const version = detectLivewireVersion(Livewire) + switch (version) { + case 4: + return createV4Adapter(Livewire) + case 3: + return createV3Adapter(Livewire) + } +} + +export type { LivewireAdapter } from './types' +export { detectAlpine } from './detect' diff --git a/src/adapter/shared.spec.ts b/src/adapter/shared.spec.ts new file mode 100644 index 0000000..e3d80dc --- /dev/null +++ b/src/adapter/shared.spec.ts @@ -0,0 +1,156 @@ +import { describe, expect, it, vi } from 'vitest' +import { extractChildIds, normalize, unwrapValue, wrapDispatch, readState } from './shared' + +describe('unwrapValue', () => { + it('strips Livewire [value, {s}] wrappers', () => { + expect(unwrapValue([5, { s: 'int' }])).toBe(5) + expect(unwrapValue(['hi', { s: 'string' }])).toBe('hi') + }) + + it('recurses through objects', () => { + expect(unwrapValue({ a: [1, { s: 'int' }], b: 'x' })).toEqual({ a: 1, b: 'x' }) + }) + + it('recurses through arrays', () => { + expect(unwrapValue([[1, { s: 'int' }], [2, { s: 'int' }]])).toEqual([1, 2]) + }) + + it('leaves primitives alone', () => { + expect(unwrapValue(1)).toBe(1) + expect(unwrapValue('x')).toBe('x') + expect(unwrapValue(null)).toBeNull() + }) +}) + +describe('readState', () => { + it('prefers component.ephemeral (Livewire 4)', () => { + const comp = { + ephemeral: { count: 5, name: 'foo' }, + canonical: { count: 3, name: 'stale' }, + data: { count: 1, name: 'older' }, + snapshot: { data: { count: 0 } } + } + expect(readState(comp)).toEqual({ count: 5, name: 'foo' }) + }) + + it('falls through to canonical then data then snapshot.data', () => { + expect(readState({ canonical: { a: 1 } })).toEqual({ a: 1 }) + expect(readState({ data: { a: [2, { s: 'int' }] } })).toEqual({ a: 2 }) + expect(readState({ snapshot: { data: { a: [3, { s: 'int' }] } } })).toEqual({ a: 3 }) + }) + + it('returns empty for a bare component', () => { + expect(readState({})).toEqual({}) + }) +}) + +describe('extractChildIds', () => { + it('uses the Livewire 4 children getter if present', () => { + const comp = { + children: [{ id: 'abc' }, { id: 'def' }] + } + expect(extractChildIds(comp)).toEqual(['abc', 'def']) + }) + + it('parses Livewire 4 memo.children as [tagName, id]', () => { + const comp = { + snapshot: { + memo: { + children: { + __key1: ['div', 'child-id-abcdef-123'], + __key2: ['span', 'child-id-xyz789-000'] + } + } + } + } + expect(extractChildIds(comp)).toEqual([ + 'child-id-abcdef-123', + 'child-id-xyz789-000' + ]) + }) + + it('handles serverMemo.children (Livewire 3)', () => { + const comp = { + serverMemo: { + children: { + __a: ['longer-id-value-abc', 'counter'] + } + } + } + // In Livewire 3 historical shape is [id, name] — first element looks like an ID. + expect(extractChildIds(comp)).toEqual(['longer-id-value-abc']) + }) + + it('returns empty for a bare component', () => { + expect(extractChildIds({})).toEqual([]) + }) +}) + +describe('normalize', () => { + it('produces a stable NormalizedComponent', () => { + const raw = { + id: 123, + name: 'counter', + el: null, + ephemeral: { count: 5 }, + children: [{ id: 'child-abc-001' }] + } + const n = normalize(raw) + expect(n.id).toBe('123') + expect(n.name).toBe('counter') + expect(n.data).toEqual({ count: 5 }) + expect(n.childIds).toEqual(['child-abc-001']) + expect(n.raw).toBe(raw) + }) + + it('falls back to snapshot.memo.name when no direct name', () => { + const n = normalize({ id: '1', snapshot: { memo: { name: 'memo-name' } } }) + expect(n.name).toBe('memo-name') + }) + + it('defaults to Anonymous', () => { + expect(normalize({ id: '1' }).name).toBe('Anonymous') + }) +}) + +describe('wrapDispatch', () => { + it('wraps Livewire.dispatch and forwards to the original', () => { + const original = vi.fn((name: string, ...args: unknown[]) => `${name}:${args.join(',')}`) + const L: any = { dispatch: original } + const cb = vi.fn() + wrapDispatch(L, cb) + const result = L.dispatch('post-created', { id: 1 }) + expect(cb).toHaveBeenCalledWith('post-created', [{ id: 1 }]) + expect(original).toHaveBeenCalledWith('post-created', { id: 1 }) + expect(result).toBe('post-created:[object Object]') + }) + + it('appends to the wrap instead of wrapping twice', () => { + const original = vi.fn() + const L: any = { dispatch: original } + const first = vi.fn() + const second = vi.fn() + wrapDispatch(L, first) + wrapDispatch(L, second) + L.dispatch('evt') + expect(first).toHaveBeenCalledTimes(1) + expect(second).toHaveBeenCalledTimes(1) + }) + + it('restores original when all listeners unsubscribe', () => { + const original = vi.fn() + const L: any = { dispatch: original } + const stop1 = wrapDispatch(L, vi.fn()) + const stop2 = wrapDispatch(L, vi.fn()) + stop1() + stop2() + expect(L.dispatch).toBe(original) + }) + + it('is a no-op when Livewire.dispatch is missing', () => { + const L: any = {} + const stop = wrapDispatch(L, vi.fn()) + expect(stop).toBeTypeOf('function') + expect(L.dispatch).toBeUndefined() + }) +}) diff --git a/src/adapter/shared.ts b/src/adapter/shared.ts new file mode 100644 index 0000000..28a7d26 --- /dev/null +++ b/src/adapter/shared.ts @@ -0,0 +1,392 @@ +import type { NormalizedComponent } from './types' + +export function normalize(component: any): NormalizedComponent { + return { + id: String(component.id), + name: + component.name ?? + component?.snapshot?.memo?.name ?? + component?.fingerprint?.name ?? + 'Anonymous', + el: (component.el ?? null) as Element | null, + data: readState(component), + childIds: extractChildIds(component), + raw: component + } +} + +export function extractChildIds(component: any): string[] { + // Livewire 4 exposes a `children` getter returning the child component instances. + // Source: livewire/js/component.js — iterates snapshot.memo.children and resolves IDs. + try { + const children = component?.children + if (Array.isArray(children) && children.length > 0) { + return children + .map((c) => (c && c.id != null ? String(c.id) : null)) + .filter((id): id is string => typeof id === 'string' && id.length > 0) + } + } catch { + /* children getter can throw while page is rehydrating */ + } + + // Fallback: parse snapshot.memo.children directly. + // Livewire 4 shape: { [wire:key]: [tagName, id] } + // Livewire 3 shape: { [key]: [id, name] } (historically inconsistent) + const memoChildren = + component?.snapshot?.memo?.children ?? component?.serverMemo?.children + if (!memoChildren) return [] + + const ids: string[] = [] + for (const value of Object.values(memoChildren)) { + if (Array.isArray(value) && value.length >= 2) { + const second = value[1] + const first = value[0] + if (typeof second === 'string' && looksLikeId(second)) { + ids.push(second) + } else if (typeof first === 'string' && looksLikeId(first)) { + ids.push(first) + } + } else if (typeof value === 'string') { + ids.push(value) + } else if (value && typeof value === 'object' && 'id' in value) { + ids.push(String((value as any).id)) + } + } + return ids +} + +function looksLikeId(s: string): boolean { + // Livewire IDs are alphanumeric strings ~10-20 chars. HTML tag names are short + // ASCII words. If it contains only lowercase letters and is ≤8 chars, treat it + // as a tag name and skip. + if (!s) return false + if (s.length <= 8 && /^[a-z]+$/.test(s)) return false + return true +} + +export function readState(component: any): Record{{ statusMessage }}
+Select a component to inspect.
++ No events yet. Dispatch any event from Livewire to see it here. +
+Select an event to inspect.
+ +{{ JSON.stringify(selected.payload, null, 2) }}
+
+ + No state changes yet. Modify a Livewire component to capture a mutation. +
++ Livewire is detected on this page. DevTools inspection is not available because it's in production mode or explicitly disabled by the author. +
+ + diff --git a/src/popup/enabled.html b/src/popup/enabled.html new file mode 100644 index 0000000..f33d2fa --- /dev/null +++ b/src/popup/enabled.html @@ -0,0 +1,9 @@ + + + + ++ Livewire is detected on this page. Open DevTools and look for the Livewire panel. +
+ + diff --git a/src/popup/not-found.html b/src/popup/not-found.html new file mode 100644 index 0000000..be997a5 --- /dev/null +++ b/src/popup/not-found.html @@ -0,0 +1,9 @@ + + + + ++ Livewire is not detected +
+ + diff --git a/src/shared-data.js b/src/shared-data.js deleted file mode 100644 index 1aeb2f7..0000000 --- a/src/shared-data.js +++ /dev/null @@ -1,90 +0,0 @@ -// Initial state -const internalSharedData = { - openInEditorHost: '/', - classifyComponents: true -} - -// ---- INTERNALS ---- // - -let Vue -let bridge -// Storage API -let storage = null -// List of fields to persist to storage (disabled if 'false') -// This should be unique to each shared data client to prevent conflicts -let persist = false -// For reactivity, we wrap the data in a Vue instance -let vm - -export function init (params) { - // Mandatory params - bridge = params.bridge - Vue = params.Vue - - if (params.hasOwnProperty('persist')) { - persist = params.persist - - if (!params.hasOwnProperty('storage')) { - throw new Error('Missing `storage` params.') - } - storage = params.storage - } - - // Load persisted fields - if (persist) { - persist.forEach(key => { - const value = storage.get(`shared-data:${key}`) - if (value !== null) { - internalSharedData[key] = value - // Send to other shared data clients - sendValue(key, value) - } - }) - } - - // Wrapper Vue instance - vm = new Vue({ - data: internalSharedData - }) - - // Update value from other shared data clients - bridge.on('shared-data:set', ({ key, value }) => { - setValue(key, value) - }) -} - -export function destroy () { - bridge.removeAllListeners('shared-data:set') - vm.$destroy() -} - -function setValue (key, value) { - // Storage - if (persist && persist.includes(key)) { - storage.set(`shared-data:${key}`, value) - } - vm[key] = value - // Validate Proxy set trap - return true -} - -function sendValue (key, value) { - bridge && bridge.send('shared-data:set', { - key, - value - }) -} - -const proxy = {} -Object.keys(internalSharedData).forEach(key => { - Object.defineProperty(proxy, key, { - configurable: false, - get: () => vm && vm.$data[key], - set: (value) => { - sendValue(key, value) - setValue(key, value) - } - }) -}) - -export default proxy diff --git a/src/shared/bridge.spec.ts b/src/shared/bridge.spec.ts new file mode 100644 index 0000000..30d7158 --- /dev/null +++ b/src/shared/bridge.spec.ts @@ -0,0 +1,86 @@ +import { describe, expect, it, vi } from 'vitest' +import { Bridge, type BridgeWall } from './bridge' + +type In = { event: 'hi'; payload: string } | { event: 'bye' } +type Out = { event: 'ping'; payload: number } + +function makeWall() { + let onMsg: ((msg: unknown) => void) | null = null + const wall: BridgeWall = { + listen(fn) { + onMsg = fn as any + }, + send: vi.fn() + } + return { + wall, + deliver(msg: unknown) { + onMsg?.(msg) + } + } +} + +describe('Bridge', () => { + it('routes incoming messages to matching listeners', () => { + const { wall, deliver } = makeWall() + const bridge = new Bridge