render(svelte`<h3>Hello world!</h3>`)
render(svelte`<script>
let name = 'world';
</script>
<h3>Hello {name}!</h3>`)
render(svelte`<style>
p {
color: purple;
font-family: 'Comic Sans MS';
font-size: 2em;
}
</style>
<p>Styled!</p>`)
m = render(svelte`<!-- a -->
<script>
import {onMount} from 'svelte';
import {readable} from 'svelte/store';
let svg;
let svgRect = {width: undefined, height: undefined}
$: width = svgRect.width;
$: height = svgRect.height;
function maybeUpdateSvgRect() {
const rects = svg.getClientRects()
console.log(svg, rects, svg.getBoundingClientRect());
if (rects.length < 1) {
return false
}
svgRect = rects[0]
return true
}
export const refresh = maybeUpdateSvgRect
onMount(() => maybeUpdateSvgRect || setTimeout(maybeUpdateSvgRect, 0))
$: console.log({width, height})
</script>
<style>
svg {
display: block;
background: green;
}
</style>
<svelte:window on:resize='{maybeUpdateSvgRect}'/>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" bind:this={svg} preserveAspectRatio="none">
<circle r=10 cx={width / 2} cy={height / 2} fill="black"/>
</svg>
`)
getComponent(m).refresh()
nested = svelte`<p>...don't affect this element</p>`
render(svelte`<script>
import Nested from ${nested};
</script>
<style>
.foo {
color: purple;
font-family: 'Comic Sans MS';
font-size: 2em;
}
</style>
<p class="foo ">These styles...</p>
<Nested/>`)
render(svelte`
<script>
import { fade } from 'svelte/transition';
let visible = true;
</script>
<label>
<input type="checkbox" bind:checked={visible}>
visible
</label>
{#if visible}
<p transition:fade>
Fades in and out
</p>
{/if}
`)
function* exampleTicker() {
yield Promise.resolve(new Date())
while (true) {
yield Promises.delay(1000, new Date());
}
}
exampleInput = html`<input type=range>`
render(svelte`<script>
export let now;
export let value;
$: console.log("NOW", $now, $value)
</script>
The time is now {$now}<br>
The value is {$value}`, {
now: generatedPromises(exampleTicker),
value: readableInput(exampleInput),
})
_svelte_both`<style>
p {
color: purple;
font-family: 'Comic Sans MS';
font-size: 2em;
}
</style>
<script>
export let l = 1
$: m = l * 2
</script>
<p>Styled {l} {m}!</p>`.ssr.default.render({l: 10})
_compiler({generate: 'ssr'})`<!-- x --><script>
import Nested from ${nested};
</script>
<style>
.foo {
color: purple;
font-family: 'Comic Sans MS';
font-size: 2em;
}
</style>
<p class="foo">These styles...</p>
<Nested/>`.js.code
function _compiler(options) {
return function (strings, ...values) {
// Replace values with random strings... and then preprocess to either replace them with properties OR values in require
// TODO(adamb) Choose a gensymPrefix that doesn't exist ANYWHERE in strings
const genSymPrefix = "gensym_923wedsojasjq_"
const rawSyms = []
const symVals = {}
let ix = 0
for (const value of values) {
const sym = genSymPrefix + ix++
rawSyms.push(`"${sym}"`)
symVals[sym] = value
}
const s = strings.reduce((prev, next, i) => `${prev}${next}${rawSyms[i] || ''}`, '')
const name = (s.match(/^\s*<!--\s*([a-zA-Z0-9_]+)/) || [])[1]
const compiled = compiler.compile(s, {format: "cjs", name, ...options})
// HACK(adamb) interpolation checking
const unknownSymTypes = []
compiler.walk(compiled.ast.instance, {
enter(node, parent, prop, index) {
// console.log("node", node)
if (node.type !== "Literal" || !(node.value in symVals)) {
return
}
if (parent.type !== "ImportDeclaration") {
unknownSymTypes.push(node)
}
},
})
if (unknownSymTypes.length > 0) {
throw Error("Interpolation is only allowed in import statements (for now)")
}
return Object.assign({requires: symVals}, compiled)
}
}
load = {
const requires = ({
"svelte/internal": internal,
"svelte": core,
"svelte/store": store,
"svelte/transition": transition,
})
return function(compiled) {
const css = compiled.css
const bundledRequires = compiled.requires || {}
const fn = new Function('require', 'exports', compiled.js.code)
const exports = {}
fn.call(
window,
name => requires[name] || bundledRequires[name],
exports,
)
exports[CSSTag] = css
return exports
}
}
function render(component, props, target) {
let t = target || DOM.element('div')
const css = component[CSSTag]
let style
if (css !== undefined) {
const head = document.getElementsByTagName('head')[0]
style = DOM.element('style')
head.appendChild(style)
style.innerHTML = css.code
}
let c = new component.default({target: t, props})
t[componentTag] = c
return Generators.disposable(t, () => {
c.$destroy()
if (t[componentTag] === c) {
delete t[componentTag]
}
t = undefined
c = undefined
if (style !== undefined && style.parentNode) {
style.parentNode.removeChild(style)
}
})
}
function getComponent(element) {
return element[componentTag]
}
function svelte(strings, ...values) {
return load(_compiler({css: true})(strings, ...values))
}
// Experimental
function _svelte_ssr(strings, ...values) {
return load(_compiler({css: true, generate: "ssr"})(strings, ...values))
}
// Experimental
function _svelte_both(strings, ...values) {
return {
dom: svelte(strings, ...values),
ssr: _svelte_ssr(strings, ...values),
}
}
readable = store.readable
writable = store.writable
derived = store.derived
get = store.get
function generatedPromises(gen, initialValue, ...args) {
return store.readable(initialValue, set => {
const g = gen(...args)
let cancelled = false
function afn({value, done}) {
if (done) {
return
}
value.then(v => {
if (!cancelled) {
set(v)
afn(g.next())
}
})
}
afn(g.next())
return () => {
// console.log("cleaning up generatedPromises", gen, g)
cancelled = true
g.return()
}
})
}
function derivedPromises(upstream, gen, initialValue) {
return store.derived(upstream, (current, set) => {
const g = gen(current)
let cancelled = false
function afn({value, done}) {
if (done) {
return
}
value.then(v => {
if (!cancelled) {
set(v)
afn(g.next())
}
})
}
afn(g.next())
return () => {
// console.log("cleaning up derivedPromises", upstream, gen, g)
cancelled = true
g.return()
}
}, initialValue)
}
function readableInput(input) {
return generatedPromises(() => Generators.input(input), input.value)
}
function observe(observable) {
return readable(observable.value, set => {
const inputted = () => set(observable.value)
observable.addEventListener('input', inputted)
return () => observable.removeEventListener('input', inputted)
})
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.