Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite build #63

Open
wants to merge 28 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 52 additions & 29 deletions .github/workflows/tests.yml
Original file line number Diff line number Diff line change
@@ -6,7 +6,32 @@ on:
pull_request:

jobs:
test:
# test:
# runs-on: ubuntu-latest
# steps:
# - uses: actions/checkout@v3
# - name: Unit tests
# uses: actions/setup-node@v3
# with:
# node-version: 18.x.x
# - run: yarn
# - run: yarn test
# - name: cypress
# uses: cypress-io/github-action@v5
# with:
# start: npm run e2e
# command: npm run cy-ci
# - name: SonarCloud Scan
# uses: SonarSource/sonarcloud-github-action@master
# env:
# GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
# SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
# - uses: actions/upload-artifact@v3
# with:
# name: cypress-videos
# path: cypress/videos
# if-no-files-found: ignore
e2e:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
@@ -15,41 +40,39 @@ jobs:
with:
node-version: 20.x.x
- run: yarn
- run: yarn test
- name: Build
run: yarn build
- name: cypress
if: ${{ false }}
uses: cypress-io/github-action@v5
with:
start: npm run e2e
start: npm run e2e,npm run preview
wait-on: http://localhost:8080
command: npm run cy-ci
- name: SonarCloud Scan
uses: SonarSource/sonarcloud-github-action@master
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
- uses: actions/upload-artifact@v3
if: failure()
with:
name: cypress-videos
path: cypress/videos
if-no-files-found: ignore
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Lints
uses: actions/setup-node@v3
with:
node-version: 20.x.x
- run: yarn
- run: yarn lint
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Lints
uses: actions/setup-node@v3
with:
node-version: 20.x.x
- run: yarn
- run: yarn build

# lint:
# runs-on: ubuntu-latest
# steps:
# - uses: actions/checkout@v3
# - name: Lints
# uses: actions/setup-node@v3
# with:
# node-version: 18.x.x
# - run: yarn
# - run: yarn lint
# build:
# runs-on: ubuntu-latest
# steps:
# - uses: actions/checkout@v3
# - name: Lints
# uses: actions/setup-node@v3
# with:
# node-version: 18.x.x
# - run: yarn
# - run: yarn build
#
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -8,7 +8,6 @@ cypress/videos
*.log
dist
build
public
.idea
test-report.xml

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added .yarn/cache/fsevents-patch-7934e3c202-8.zip
Binary file not shown.
Binary file not shown.
Binary file removed .yarn/cache/he-npm-1.2.0-3b73a2ff07-3d4d6babcc.zip
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
18 changes: 15 additions & 3 deletions cypress.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
const fetch = require('node-fetch');
const { defineConfig } = require('cypress');
const webpackConfig = require('./webpack.config.js');

module.exports = defineConfig({
viewportHeight: 720,
@@ -11,12 +10,25 @@ module.exports = defineConfig({
specPattern: 'ext/**/*.cy.js',
devServer: {
framework: 'svelte',
bundler: 'webpack',
webpackConfig,
bundler: 'vite',
},
setupNodeEvents(on, config) {
require('./cypress-node-events')(on);

// Shutdown the server after `yarn cypress run --component completes
// This ensures that c8 outputs the lcov.info file properly
on('after:run', () => {
return fetch('http://localhost:9000/shutdown');
});
return config;
},
},
e2e: {
video: true,
baseUrl: 'http://localhost:8080',
setupNodeEvents(on, config) {
require('./cypress-node-events')(on);

// Shutdown the server after `yarn cypress run --component completes
// This ensures that c8 outputs the lcov.info file properly
on('after:run', () => {
69 changes: 69 additions & 0 deletions cypress/e2e/App.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
describe('Web Extension', () => {
it('can display seen requests', () => {
// Jambox should generate a static hash for the URL below
const HASH = '2be35430d93be811753ecfd6ba828878';
const STUB_HASH = 'cd4482b36a608021cd943786ecb54c5d';
const testURL = 'http://jambox-test.com/returnThisAsJson';
cy.visit('/');
cy.task('jambox.reset');

cy.request(testURL);

// Additional requests to fill up the cache
cy.request('http://jambox-test.com/pathA');
cy.request('http://jambox-test.com/pathB');
cy.request('http://jambox-test.com/pathC');

cy.get(`[data-cy-id="${testURL}"]`).as('request');

cy.get('@request').contains('200');
cy.get('@request').contains('fetch');

cy.get('@request').click({ force: true });

cy.get('[data-cy-id="request-info"]').as('modal');

cy.get('@modal').contains(testURL);
cy.get('[data-cy-id="select-response-tab"]').click();
cy.get('@modal').contains('path');
cy.get('@modal').contains('/returnThisAsJson');

cy.get('[data-cy-id="back-to-waterfall"]').click();

cy.get('@modal').should('not.exist');

// When network requests are blocked no caching happens, so disable blocking
cy.get(`[data-cy-id="block-network"]`).as('block-network').uncheck();
cy.get('@block-network').should('have.prop', 'indeterminate');

cy.wait(50);
cy.request(testURL);

cy.get('[data-cy-id="cache-link"]').click();

cy.get(`[data-cy-id="cache-cell-edit-${HASH}"]`).as('test-edit');
cy.get('@test-edit').click();
cy.get('[data-cy-id="select-request-tab"]').click();
cy.get('[data-cy-id="cache-detail"]').contains(testURL);

cy.get('[data-cy-id="cache-detail"]').contains('path');
cy.get('[data-cy-id="cache-detail"]').contains('/returnThisAsJson');

cy.get('[data-cy-id="back-to-cache"]').click();

cy.get('[data-cy-id="cache-detail"]').should('not.exist');

// clear cache
cy.get('@test-edit').click();
cy.get('[data-cy-id="cache-delete"]').click();
cy.get('[data-cy-id="cache-detail"]').should('not.exist');

cy.get(`[data-cy-id="cache-cell-edit-${STUB_HASH}"]`).as('stub');
cy.get('@stub').click();
cy.get('[data-cy-id="select-response-tab"]').click();
cy.get('[data-cy-id="cache-detail"]').contains('test-stub');

// all of the seen requests will only persist in-memory
// next cy.task('jambox-reset') will clear them
});
});
109 changes: 109 additions & 0 deletions cypress/e2e/Cache.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
// static hashes for requests used below
const A = 'ba20ccbb470042f3200692cad1926c1c';
const B = 'f4c55ab257c689845921746061bfeb73';
const C = 'cd4482b36a608021cd943786ecb54c5d';

describe('Cache UI', () => {
it('can edit response objects', () => {
// load jambox config from cwd
cy.visit('/');
cy.task('jambox.reset');

// Additional requests to fill up the cache
cy.request('http://jambox-test.com/pathA');
cy.request('http://jambox-test.com/pathB');
cy.request('http://jambox-test.com/pathC');

cy.get('[data-cy-id="cache-link"]').click();
cy.get(`[data-cy-id="cache-cell-edit-${A}"]`).as('test-edit');
cy.get('@test-edit').click();
cy.get('[data-cy-id="select-response-tab"]').click();

// Edit body
cy.get('[data-cy-id="select-response-tab"]').click();
cy.get(
'[data-path="%2Fbody"] > .jse-props > .jse-json-node > .jse-contents-outer > .jse-contents > .jse-value'
).dblclick();
cy.get('.jse-editable-div').clear();
cy.get('.jse-editable-div').type('foobar{enter}');
cy.get('[data-cy-id="update-response-btn"]').click();

// Close
cy.get('[data-cy-id="back-to-cache"]').click({ force: true });

// Open modal
cy.get('@test-edit').click();
cy.get('[data-cy-id="select-response-tab"]').click();
cy.get('[data-cy-id="cache-detail"]').contains('foobar');

// clear cache
cy.get('[data-cy-id="select-details-tab"]').click();
cy.get('[data-cy-id="cache-delete"]').click();
cy.get('[data-cy-id="cache-detail"]').should('not.exist');
});

it('can persist records and delete them after', () => {
cy.visit('/');
// load jambox config from cwd
cy.task('jambox.reset');

cy.request('http://jambox-test.com/pathA');
cy.request('http://jambox-test.com/pathB');
cy.request('http://jambox-test.com/pathC');

cy.get('[data-cy-id="cache-link"]').click();
cy.get(`[data-cy-id="cache-cell-edit-${A}"]`).as('test-persist-A');
cy.get(`[data-cy-id="cache-cell-edit-${B}"]`).as('test-persist');
cy.get(`[data-cy-id="select-row-${B}"]`).as('test-persist-select');
cy.get(`[data-cy-id="select-row-${A}"]`).as('test-persist-select-A');
cy.get(`[data-cy-id="cache-cell-edit-${C}"]`).as('test-in-memory-cache');

// Persist should be click-able
cy.get('@test-persist-select').click();
cy.get('@test-persist-select-A').click();
cy.get('[data-cy-id="cache-persist"]').click();
cy.get(`[data-cy-id="cache-cell-persisted-true-${B}"]`).should('exist');

// Edit persisted record
cy.get('@test-persist').click();
cy.get('[data-cy-id="select-response-tab"]').click();

// Edit body
cy.get('[data-cy-id="select-response-tab"]').click();
cy.get(
'[data-path="%2Fbody"] > .jse-props > .jse-json-node > .jse-contents-outer > .jse-contents > .jse-value'
).dblclick();
cy.get('.jse-editable-div').clear();
cy.get('.jse-editable-div').type('foobar{enter}');
cy.get('[data-cy-id="update-response-btn"]').click();
// Close
cy.get('[data-cy-id="back-to-cache"]').click();

// Back to Waterfall
cy.get('[data-cy-id="waterfall-link"]').click();

// Reset jambox. This deletes in-memory cache
cy.task('jambox.reset');

// Back to cache
cy.get('[data-cy-id="cache-link"]').click();

// Cache should be loaded from a tape and contain the edited
cy.get('@test-persist').click();
cy.get('[data-cy-id="select-response-tab"]').click();
cy.get('[data-cy-id="cache-detail"]').contains('foobar');

// Back to cache
cy.get('[data-cy-id="cache-link"]').click();

// The pathC cached value was not persisted and should no longer exist in UI
cy.get('@test-in-memory-cache').should('not.exist');

cy.get('@test-persist-select').click();
cy.get('@test-persist-select-A').click();
cy.get('[data-cy-id="cache-delete"]').click();

cy.get('@test-persist').should('not.exist');
cy.get('@test-persist-A').should('not.exist');
});
});
4 changes: 2 additions & 2 deletions cypress/support/component.js
Original file line number Diff line number Diff line change
@@ -20,8 +20,8 @@
// require('./commands')

// import { mount } from 'cypress/svelte/dist/cypress-svelte.esm-bundler.js';
require('./commands');
const { mount } = require('cypress/svelte');
import './commands';
import { mount } from 'cypress/svelte';
Cypress.Commands.add('mount', mount);

// Example use:
Empty file added cypress/support/e2e.js
Empty file.
7 changes: 3 additions & 4 deletions ext/App.svelte
Original file line number Diff line number Diff line change
@@ -5,14 +5,13 @@
createMemorySource,
} from 'svelte-routing/src/history';
import { store, reducer } from './store.js';
import Cache from './Cache';
import Cache from './Cache/index.svelte';
import Checkbox from './Checkbox.svelte';
import Waterfall from './Waterfall.svelte';
import RequestInfo from './RequestInfo';
import RequestInfo from './RequestInfo/index.svelte';
import CacheEntry from './CacheEntry.svelte';

export let api;

let search = $store.search;
const history = createHistory(createMemorySource());
const chrome = window.chrome;
@@ -144,7 +143,7 @@
<input
type="search"
bind:value={search}
autocomplete
autocomplete="on"
placeholder="search"
/>
</div>
4 changes: 0 additions & 4 deletions ext/devtool.html

This file was deleted.

5 changes: 0 additions & 5 deletions ext/devtool.js

This file was deleted.

21 changes: 0 additions & 21 deletions ext/manifest.js

This file was deleted.

1 change: 1 addition & 0 deletions ext/panel.html → index.html
Original file line number Diff line number Diff line change
@@ -8,5 +8,6 @@
</head>
<body>
</body>
<script type="module" src="/ext/panel.js"></script>
</html>

24 changes: 0 additions & 24 deletions manifest-plugin.js

This file was deleted.

19 changes: 9 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
@@ -14,20 +14,22 @@
"url": "git+github.com:ballercat/jambox.git"
},
"scripts": {
"build": "webpack",
"build": "vite build",
"dev": "nodemon --watch ext --watch src --exec ./jam-server.mjs",
"test": "c8 -r=text -r=lcov ava",
"e2e": "NODE_OPTIONS=--dns-result-order=ipv4first c8 -o ./coverage-cypress -r=text -r=lcov node ./e2e-backend.mjs",
"e2e-dev": "nodemon --watch ext --watch src --exec ./e2e-backend.mjs",
"cy": "HTTP_PROXY=http://localhost:8000 cypress open --component",
"cy-ci": "HTTP_PROXY=http://localhost:8000 cypress run --component",
"cy": "HTTP_PROXY=http://localhost:8000 cypress open --e2e",
"cy-ci": "HTTP_PROXY=http://localhost:8000 NO_PROXY=127.0.0.1,localhost cypress run --e2e",
"lint": "eslint src/**/*.mjs",
"format": "prettier --write ./src",
"shutdown": "curl localhost:9000/shutdown",
"health": "curl localhost:9000/info"
"health": "curl localhost:9000/info",
"preview": "yarn vite preview --host"
},
"dependencies": {
"@httptoolkit/browser-launcher": "^2.0.2",
"@sveltejs/vite-plugin-svelte": "^3.1.1",
"@yarnpkg/fslib": "^3.0.0-rc.48",
"@yarnpkg/libzip": "^3.0.0-rc.48",
"arg": "^5.0.2",
@@ -45,6 +47,7 @@
"osenv": "^0.1.5",
"tail-file": "^1.4.15",
"undici": "6.7.0",
"vite": "^5.4.0",
"wait-on": "^6.0.1",
"zen-observable": "^0.9.0"
},
@@ -57,14 +60,12 @@
"babel-loader": "^9.1.0",
"babel-plugin-module-resolver": "^4.1.0",
"c8": "^7.12.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"cypress": "^13.13.2",
"cypress": "13.13.2",
"eslint": "^8.31.0",
"eslint-plugin-svelte3": "^4.0.0",
"eslint-plugin-typescript": "^0.14.0",
"find-open-port": "^2.0.3",
"html-webpack-plugin": "^5.5.0",
"https-proxy-agent": "^5.0.1",
"memfs": "^4.2.1",
"nodemon": "^2.0.20",
@@ -81,9 +82,7 @@
"svelte-table": "^0.6.1",
"svelte-watch-resize": "^1.0.3",
"typescript": "^5.1.3",
"webextension-polyfill": "^0.10.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
"webextension-polyfill": "^0.10.0"
},
"nodemonConfig": {
"env": {
7 changes: 7 additions & 0 deletions public/devtool.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="/devtool.js"></script>
</head>
<body></body>
</html>
1 change: 1 addition & 0 deletions public/devtool.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
chrome.devtools.panels.create('Jambox', null, 'index.html', null);
File renamed without changes
21 changes: 21 additions & 0 deletions public/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"name": "Jambox",
"description": "Examine and edit proxied requests",
"version": "0.0.2",
"manifest_version": 3,
"permissions": [
"scripting",
"proxy",
"debugger",
"notifications",
"webNavigation"
],
"devtools_page": "devtool.html",
"host_permissions": ["<all_urls>"],
"web_accessible_resources": [
{
"resources": ["index.js", "devtool.js", "runtime.json"],
"matches": ["<all_urls>"]
}
]
}
28 changes: 28 additions & 0 deletions vite.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
plugins: [svelte()],
build: {
outDir: './build',
rollupOptions: {
output: {
manualChunks: false,
inlineDynamicImports: true,
entryFileNames: '[name].js',
chunkFileNames: '[name].js',
assetFileNames: '[name].[ext]',
},
},
},
devServer: {
host: true,
},
preview: {
host: true,
port: '8080',
},
server: {
host: true,
},
});
86 changes: 0 additions & 86 deletions webpack.config.js

This file was deleted.

1,537 changes: 590 additions & 947 deletions yarn.lock

Large diffs are not rendered by default.