Solana packaged into a Svelte Component for use in Svelte, Browsers, and REPLs
Built with svelte kit!
Had issues with solana/web3 in the browser, so made this to make life easier. What problems you ask? Buffer, global, and more buffer issues. Bundling them up here skips all that pain and uses the libraries in the browser with ease.
See src/routes/index.svelte for good ideas club, such as simple example below:
// somewhere.svelte
import Solana from 'sveltana'
let dapp
let config = {
network: 'devnet' || 'main'
}
<Solana {config} bind:dapp />
{#if dapp}
Now use dapp for Solana access
{dapp.network} // devnet
{/if}
To get Solana to work:
svelte.config.js
, add vite
to kit
:kit:{
... // previous boring config stuff
vite: {
ssr: {
external: [
/@babel\/runtime/,
'bn.js',
'borsh',
'bs58',
'buffer-layout',
'crypto-hash',
'jayson/lib/client/browser',
'js-sha3',
'node-fetch',
'rpc-websockets',
'secp256k1',
'superstruct',
'tweetnacl'
]
},
resolve: {
mainFields: ['browser', 'module', 'main', 'jsnext'],
dedupe: ['bn.js', 'buffer'],
extensions: ['.js', '.ts'],
preferBuiltins: false
}
}
}
In main component, add:
<svelte:head>
<script>
global = globalThis // for solana web3 repo
</script>
</svelte:head>
In main component, add:
onMount(async () => {
// setup some globals
import("buffer").then((Buffer) => {
global.Buffer = Buffer.Buffer
})
})
Follow this
Running svelte-kit package will take the contents of src/lib and generate a package directory