@movingbrands/svelte-portable-text
v0.0.11
Published
Svelte component for rendering sanity.io style Portable Text
Downloads
109
Readme
svelte-portable-text
Note: this package is in active development, will likely change and may contain errors.
Install
At the moment, it seems the best approach is to install @sanity/block-content-to-hyperscript alongside this component.
Installing Svelte components as a devDependency
seems to address this issue.
npm install @movingbrands/svelte-portable-text @sanity/block-content-to-hyperscript --save-dev
Usage example
<script>
import BlockContent from "@movingbrands/svelte-portable-text";
import Image from "./Image";
import Link from "./Link";
export let content;
export const customSerializers = {
types: {
image: props => {
return {
component: Image,
childNodes: props.children,
props: {
url: props.node.url
}
};
}
},
marks: {
link: props => {
return {
component: Link,
childNodes: props.children,
props: props.mark
};
}
}
};
</script>
<BlockContent blocks={content} serializers={customSerializers} />
Consuming components
With Svelte apps (recommended approach)
This package.json has a "svelte"
field pointing to src/index.svelte
, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields
in your webpack config includes "svelte"
).
Apps which aren't using Svelte elsewhere
npm run build
will bundle your component's source code into a plain JavaScript module (index.mjs
) and a UMD script (index.js
).