Skip to content

How to use sql.js-httpvfs in project-seed #95

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.

Sign up for GitHub

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

Closed
wants to merge 2 commits into from
Closed

How to use sql.js-httpvfs in project-seed #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
817e207
A minimal example of how to use sql.js-httpvfs in project seed
vgeorge May 11, 2021
aa1928d
Add task to copy needed files
danielfdsilva May 11, 2021
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
29 changes: 27 additions & 2 deletions app/assets/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,47 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { ThemeProvider } from 'styled-components';
import { render } from 'react-dom';

import GlobalStyles from './styles/global';

import { createDbWorker } from 'sql.js-httpvfs';

// Root component.
function Root() {
const [text, setText] = useState(null);

useEffect(() => {
// Hide the welcome banner.
const banner = document.querySelector('#welcome-banner');
banner.classList.add('dismissed');
setTimeout(() => banner.remove(), 500);

// Create SQLite worked
createDbWorker(
[
{
from: 'inline',
config: {
serverMode: 'full',
url: '/example.sqlite3',
requestChunkSize: 4096
}
}
],
'/sqlite.worker.js',
'/sql-wasm.wasm'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'll be loading these as a network request. It should use an absolute url. If you're serving the website from inside a folder, this needs to be correctly prefixed.

).then((worker) => {
// Do a query
worker.db
.query(`select * from mytable`)
.then((result) => setText(JSON.stringify(result)));
});
}, []);

return (
<ThemeProvider theme={{}}>
<GlobalStyles />
<p>Hello from Starter</p>
<p>{text || 'Loading...'}</p>
</ThemeProvider>
);
}
Expand Down
Binary file added app/example.sqlite3
View file
Open in desktop
Binary file not shown.
11 changes: 11 additions & 0 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,12 +88,14 @@ function serve() {
module.exports.clean = clean;
module.exports.serve = gulp.series(
collecticons,
copyVendorFiles,
gulp.parallel(vendorScripts, javascript),
serve
);
module.exports.default = gulp.series(
clean,
collecticons,
copyVendorFiles,
gulp.parallel(vendorScripts, javascript),
gulp.parallel(html, imagesImagemin),
copyFiles,
Expand Down Expand Up @@ -204,6 +206,15 @@ function collecticons() {
// --------------------------- Helper tasks -----------------------------------//
// ----------------------------------------------------------------------------//

function copyVendorFiles() {
return gulp
.src([
'./node_modules/sql.js-httpvfs/dist/sqlite.worker.js',
'./node_modules/sql.js-httpvfs/dist/sql-wasm.wasm'
])
.pipe(gulp.dest(isDev() ? '.tmp' : 'dist'));
}
Comment on lines +209 to +216
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To avoid committing third party libraries, I created a task to copy the needed files. They are copied to .tmp or dist depending if you're in development or building for production. They're copied to the root of the folder, that's why they're then accessed with /<name>


function copyFiles() {
return gulp
.src(['app/**/*', '!app/assets/**', '!app/index.html'])
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"sql.js-httpvfs": "^0.8.9",
"styled-components": "^5.2.1"
}
}
10 changes: 5 additions & 5 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6236,11 +6236,6 @@ lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.19, lodash@^4.17
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==

lodash@^4.17.12:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==

log-symbols@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
Expand Down Expand Up @@ -8754,6 +8749,11 @@ sprintf-js@~1.0.2:
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=

sql.js-httpvfs@^0.8.9:
version "0.8.9"
resolved "https://registry.yarnpkg.com/sql.js-httpvfs/-/sql.js-httpvfs-0.8.9.tgz#3c75c179143b2a9641219b749a156fc3d1a668b2"
integrity sha512-xEPxcbij/Wq1UGcNxIFBxzxBXWMs0op+P7lwfrxfIJxWxuGRGz8W8fqInJsGucWydl/oG2G2ZwrR3BUMHSjMOA==

squeak@^1.0.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/squeak/-/squeak-1.3.0.tgz#33045037b64388b567674b84322a6521073916c3"
Expand Down