zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

migrate to vite

Browse Source
This commit is contained in:
lana-k
2025-02-01 20:54:26 +01:00
parent 8fa3c2ae58
commit 828cad6439
17 changed files with 92 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.js
View File

@@ -1,15 +1,13 @@
module.exports = { module.exports = {
root: true, root: true,
env: { env: {
node: true node: true,
es2022: true,
}, },
extends: [ extends: [
'plugin:vue/essential', 'plugin:vue/essential',
'@vue/standard' '@vue/standard'
], ],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

12
public/index.html → index.html
View File

@@ -4,9 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.png"> <link rel="icon" href="favicon.png">
<link rel="manifest" href="<%= BASE_URL %>manifest.webmanifest"> <link rel="manifest" href="manifest.webmanifest">
<title><%= htmlWebpackPlugin.options.title %></title> <title>sqliteviz</title>
<style> <style>
#sqliteviz-loading-wrapper { #sqliteviz-loading-wrapper {
position: fixed; position: fixed;
@@ -74,7 +74,7 @@
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"> <div id="app">
<div id="sqliteviz-loading-wrapper"> <div id="sqliteviz-loading-wrapper">
@@ -95,8 +95,6 @@
</svg> </svg>
</div> </div>
</div> </div>
<!-- extention slot start --> <script type="module" src="/src/main.js"></script>
<!-- extention slot end -->
<!-- built files will be auto injected -->
</body> </body>
</html> </html>

12
src/App.vue
View File

@@ -33,42 +33,42 @@ export default {
<style> <style>
@font-face { @font-face {
font-family: "Open Sans"; font-family: "Open Sans";
src: url("~@/assets/fonts/OpenSans-Regular.woff2"); src: url("@/assets/fonts/OpenSans-Regular.woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Open Sans"; font-family: "Open Sans";
src: url("~@/assets/fonts/OpenSans-SemiBold.woff2"); src: url("@/assets/fonts/OpenSans-SemiBold.woff2");
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Open Sans"; font-family: "Open Sans";
src: url("~@/assets/fonts/OpenSans-Bold.woff2"); src: url("@/assets/fonts/OpenSans-Bold.woff2");
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Open Sans"; font-family: "Open Sans";
src: url("~@/assets/fonts/OpenSans-Italic.woff2"); src: url("@/assets/fonts/OpenSans-Italic.woff2");
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: "Open Sans"; font-family: "Open Sans";
src: url("~@/assets/fonts/OpenSans-SemiBoldItalic.woff2"); src: url("@/assets/fonts/OpenSans-SemiBoldItalic.woff2");
font-weight: 600; font-weight: 600;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: "Open Sans"; font-family: "Open Sans";
src: url("~@/assets/fonts/OpenSans-BoldItalic.woff2"); src: url("@/assets/fonts/OpenSans-BoldItalic.woff2");
font-weight: 700; font-weight: 700;
font-style: italic; font-style: italic;
} }

2
src/assets/styles/dialogs.css
View File

@@ -23,7 +23,7 @@
} }
.dialog-body { .dialog-body {
min-height: 60px; min-height: 56px;
background-color: var(--color-bg-light); background-color: var(--color-bg-light);
padding: 24px; padding: 24px;
border-top: 1px solid var(--color-border-light); border-top: 1px solid var(--color-border-light);

8
src/assets/styles/multiselect.css
View File

@@ -62,14 +62,14 @@
margin: 2px; margin: 2px;
} }
.sqliteviz-select .multiselect__tag-icon:after { .sqliteviz-select .multiselect__tag-icon:after {
content: url('~@/assets/images/delete-tag.svg'); content: url('@/assets/images/delete-tag.svg');
height: 14px; height: 14px;
width: 14px; width: 14px;
} }
.sqliteviz-select .multiselect__tag-icon:focus:after, .sqliteviz-select .multiselect__tag-icon:focus:after,
.sqliteviz-select .multiselect__tag-icon:hover:after { .sqliteviz-select .multiselect__tag-icon:hover:after {
content: url('~@/assets/images/delete-tag-hover.svg'); content: url('@/assets/images/delete-tag-hover.svg');
} }
.sqliteviz-select .multiselect__tag-icon:focus, .sqliteviz-select .multiselect__tag-icon:focus,
@@ -102,7 +102,7 @@
} }
.sqliteviz-select .multiselect__select:before { .sqliteviz-select .multiselect__select:before {
content: url('~@/assets/images/arrow.svg'); content: url('@/assets/images/arrow.svg');
border: none; border: none;
top: 0; top: 0;
} }
@@ -116,7 +116,7 @@
} }
.sqliteviz-select .multiselect__select:hover:before { .sqliteviz-select .multiselect__select:hover:before {
content: url('~@/assets/images/arrow-hover.svg'); content: url('@/assets/images/arrow-hover.svg');
} }
.sqliteviz-select.multiselect--active .multiselect__tags { .sqliteviz-select.multiselect--active .multiselect__tags {

6
src/components/CheckBox.vue
View File

@@ -7,12 +7,12 @@
<img <img
v-show="checked && !disabled" v-show="checked && !disabled"
:src="theme === 'light' :src="theme === 'light'
? require('@/assets/images/checkbox_checked_light.svg') ? '~@/assets/images/checkbox_checked_light.svg'
: require('@/assets/images/checkbox_checked.svg')" : '~@/assets/images/checkbox_checked.svg'"
/> />
<img <img
v-show="checked && disabled" v-show="checked && disabled"
:src="require('@/assets/images/checkbox_checked_disabled.svg')" src="~@/assets/images/checkbox_checked_disabled.svg"
/> />
<span v-if="label" class="label">{{ label }}</span> <span v-if="label" class="label">{{ label }}</span>
</div> </div>

12
src/components/DbUploader.vue
View File

@@ -16,11 +16,11 @@
</div> </div>
</div> </div>
<div v-if="type === 'illustrated'" id="img-container"> <div v-if="type === 'illustrated'" id="img-container">
<img id="drop-file-top-img" :src="require('@/assets/images/top.svg')" /> <img id="drop-file-top-img" src="~@/assets/images/top.svg" />
<img <img
id="left-arm-img" id="left-arm-img"
:class="{'swing': state === 'dragover'}" :class="{'swing': state === 'dragover'}"
:src="require('@/assets/images/leftArm.svg')" src="~@/assets/images/leftArm.svg"
/> />
<img <img
id="file-img" id="file-img"
@@ -30,14 +30,14 @@
'fly': state === 'dropping', 'fly': state === 'dropping',
'hidden': state === 'dropped' 'hidden': state === 'dropped'
}" }"
:src="require('@/assets/images/file.png')" src="~@/assets/images/file.png"
/> />
<img id="drop-file-bottom-img" :src="require('@/assets/images/bottom.svg')" /> <img id="drop-file-bottom-img" src="~@/assets/images/bottom.svg" />
<img id="body-img" :src="require('@/assets/images/body.svg')" /> <img id="body-img" src="~@/assets/images/body.svg" />
<img <img
id="right-arm-img" id="right-arm-img"
:class="{'swing': state === 'dragover'}" :class="{'swing': state === 'dragover'}"
:src="require('@/assets/images/rightArm.svg')" src="~@/assets/images/rightArm.svg"
/> />
</div> </div>
<div id="error" class="error"></div> <div id="error" class="error"></div>

2
src/components/LoadingDialog.vue
View File

@@ -14,7 +14,7 @@
{{ loadingMsg }} {{ loadingMsg }}
</div> </div>
<div v-else class="loading-dialog-body"> <div v-else class="loading-dialog-body">
<img :src="require('@/assets/images/success.svg')" class="success-icon state-icon" /> <img src="~@/assets/images/success.svg" class="success-icon state-icon" />
{{ successMsg }} {{ successMsg }}
</div> </div>
</div> </div>

6
src/components/Logs.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div class="logs-container" ref="logsContainer"> <div class="logs-container" ref="logsContainer">
<div v-for="(msg, index) in messages" :key="index" class="msg"> <div v-for="(msg, index) in messages" :key="index" class="msg">
<img v-if="msg.type === 'error'" :src="require('@/assets/images/error.svg')"> <img v-if="msg.type === 'error'" src="~@/assets/images/error.svg">
<img v-if="msg.type === 'info'" :src="require('@/assets/images/info.svg')" width="20px"> <img v-if="msg.type === 'info'" src="~@/assets/images/info.svg" width="20px">
<img v-if="msg.type === 'success'" :src="require('@/assets/images/success.svg')"> <img v-if="msg.type === 'success'" src="~@/assets/images/success.svg">
<loading-indicator v-if="msg.type === 'loading'" :progress="msg.progress" /> <loading-indicator v-if="msg.type === 'loading'" :progress="msg.progress" />
<span class="msg-text">{{ serializeMessage(msg) }}</span> <span class="msg-text">{{ serializeMessage(msg) }}</span>
</div> </div>

4
src/components/Splitpanes/index.vue
View File

@@ -39,7 +39,7 @@
> >
<img <img
class="direction-icon" class="direction-icon"
:src="require('@/assets/images/chevron.svg')" src="~@/assets/images/chevron.svg"
:style="directionBeforeIconStyle" :style="directionBeforeIconStyle"
> >
</div> </div>
@@ -50,7 +50,7 @@
> >
<img <img
class="direction-icon" class="direction-icon"
:src="require('@/assets/images/chevron.svg')" src="~@/assets/images/chevron.svg"
:style="directionAfterIconStyle" :style="directionAfterIconStyle"
> >
</div> </div>

5
src/lib/database/_sql.js
View File

@@ -1,8 +1,11 @@
import initSqlJs from 'sql.js/dist/sql-wasm.js' import initSqlJs from 'sql.js/dist/sql-wasm.js'
import dbUtils from './_statements' import dbUtils from './_statements'
import wasmUrl from 'sql.js/dist/sql-wasm.wasm?url'
let SQL = null let SQL = null
const sqlModuleReady = initSqlJs().then(sqlModule => { SQL = sqlModule }) const sqlModuleReady = initSqlJs({
locateFile: () => wasmUrl
}).then(sqlModule => { SQL = sqlModule })
function _getDataSourcesFromSqlResult (sqlResult) { function _getDataSourcesFromSqlResult (sqlResult) {
if (!sqlResult) { if (!sqlResult) {

8
src/lib/database/index.js
View File

@@ -1,7 +1,4 @@
import fu from '@/lib/utils/fileIo' import fu from '@/lib/utils/fileIo'
// We can import workers like so because of worker-loader:
// https://webpack.js.org/loaders/worker-loader/
import Worker from './_worker.js'
// Use promise-worker in order to turn worker into the promise based one: // Use promise-worker in order to turn worker into the promise based one:
// https://github.com/nolanlawson/promise-worker // https://github.com/nolanlawson/promise-worker
@@ -10,7 +7,10 @@ import PromiseWorker from 'promise-worker'
import events from '@/lib/utils/events' import events from '@/lib/utils/events'
function getNewDatabase () { function getNewDatabase () {
const worker = new Worker() const worker = new Worker(
new URL('./_worker.js', import.meta.url),
{ type: 'module' }
)
return new Database(worker) return new Database(worker)
} }

5
src/views/Main/AppDiagnosticInfo.vue
View File

@@ -2,7 +2,7 @@
<div id="app-info-container"> <div id="app-info-container">
<img <img
id="app-info-icon" id="app-info-icon"
:src="require('@/assets/images/info.svg')" src="~@/assets/images/info.svg"
@click="$modal.show('app-info')" @click="$modal.show('app-info')"
/> />
<modal <modal
@@ -31,6 +31,7 @@
<script> <script>
import CloseIcon from '@/components/svg/close' import CloseIcon from '@/components/svg/close'
import { version } from '../../../package.json'
export default { export default {
name: 'AppDiagnosticInfo', name: 'AppDiagnosticInfo',
@@ -40,7 +41,7 @@ export default {
info: [ info: [
{ {
name: 'sqliteviz version', name: 'sqliteviz version',
info: [require('../../../package.json').version] info: [version]
} }
] ]
} }

6
src/views/Main/Inquiries/index.vue
View File

@@ -119,7 +119,7 @@
</div> </div>
<!--Rename Inquiry dialog --> <!--Rename Inquiry dialog -->
<modal modal-id="rename" class="dialog"> <modal modal-id="rename" class="dialog" content-style="width: 560px;">
<div class="dialog-header"> <div class="dialog-header">
Rename inquiry Rename inquiry
<close-icon @click="$modal.hide('rename')"/> <close-icon @click="$modal.hide('rename')"/>
@@ -139,7 +139,7 @@
</modal> </modal>
<!--Delete Inquiry dialog --> <!--Delete Inquiry dialog -->
<modal modal-id="delete" class="dialog"> <modal modal-id="delete" class="dialog" content-style="width: 480px;">
<div class="dialog-header"> <div class="dialog-header">
Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }} Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }}
<close-icon @click="$modal.hide('delete')"/> <close-icon @click="$modal.hide('delete')"/>
@@ -147,7 +147,7 @@
<div class="dialog-body"> <div class="dialog-body">
{{ deleteDialogMsg }} {{ deleteDialogMsg }}
<div v-show="selectedInquiriesCount > selectedNotPredefinedCount" id="note"> <div v-show="selectedInquiriesCount > selectedNotPredefinedCount" id="note">
<img :src="require('@/assets/images/info.svg')"> <img src="~@/assets/images/info.svg">
Note: Predefined inquiries you've selected won't be deleted Note: Predefined inquiries you've selected won't be deleted
</div> </div>
</div> </div>

6
src/views/Main/MainMenu.vue
View File

@@ -2,7 +2,7 @@
<nav> <nav>
<div id="nav-links"> <div id="nav-links">
<a href="https://sqliteviz.com"> <a href="https://sqliteviz.com">
<img :src="require('@/assets/images/logo_simple.svg')"> <img src="~@/assets/images/logo_simple.svg">
</a> </a>
<router-link to="/workspace">Workspace</router-link> <router-link to="/workspace">Workspace</router-link>
<router-link to="/inquiries">Inquiries</router-link> <router-link to="/inquiries">Inquiries</router-link>
@@ -29,14 +29,14 @@
</div> </div>
<!--Save Inquiry dialog --> <!--Save Inquiry dialog -->
<modal modal-id="save" class="dialog"> <modal modal-id="save" class="dialog" content-style="width: 560px;">
<div class="dialog-header"> <div class="dialog-header">
Save inquiry Save inquiry
<close-icon @click="cancelSave"/> <close-icon @click="cancelSave"/>
</div> </div>
<div class="dialog-body"> <div class="dialog-body">
<div v-show="isPredefined" id="save-note"> <div v-show="isPredefined" id="save-note">
<img :src="require('@/assets/images/info.svg')"> <img src="~@/assets/images/info.svg">
Note: Predefined inquiries can't be edited. Note: Predefined inquiries can't be edited.
That's why your modifications will be saved as a new inquiry. Enter the name for it. That's why your modifications will be saved as a new inquiry. Enter the name for it.
</div> </div>

4
src/views/Main/Workspace/Tabs/index.vue
View File

@@ -29,7 +29,7 @@
</div> </div>
<!--Close tab warning dialog --> <!--Close tab warning dialog -->
<modal modal-id="close-warn" class="dialog"> <modal modal-id="close-warn" class="dialog" content-style="width: 560px;">
<div class="dialog-header"> <div class="dialog-header">
Close tab {{ Close tab {{
closingTab !== null closingTab !== null
@@ -49,7 +49,7 @@
<button class="secondary" @click="closeTab(closingTab)"> <button class="secondary" @click="closeTab(closingTab)">
Close without saving Close without saving
</button> </button>
<button class="secondary" @click="$modal.hide('close-warn')">Cancel</button> <button class="secondary" @click="$modal.hide('close-warn')">Don't close</button>
<button class="primary" @click="saveAndClose(closingTab)">Save and close</button> <button class="primary" @click="saveAndClose(closingTab)">Save and close</button>
</div> </div>
</modal> </modal>

40
vite.config.js Normal file
View File

@@ -0,0 +1,40 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
import { viteStaticCopy } from 'vite-plugin-static-copy'
// https://vitejs.dev/config/
export default defineConfig({
base: '',
plugins: [
vue(),
nodePolyfills({
include: ['process', 'util', 'stream', 'buffer'],
globals: { global: true, process: true },
}),
viteStaticCopy({
targets: [
{
src: 'LICENSE',
dest: './'
}
]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
},
optimizeDeps: {
include:['sql.js/dist/sql-wasm.js'],
esbuildOptions: {
define: {
global: 'globalThis'
}
}
}
})