feat: render HTML from djot source

.prettierrc

@@ -1,7 +1,7 @@
 {
 	"useTabs": true,
 	"singleQuote": true,
-	"trailingComma": "none",
+	"trailingComma": "es5",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
 	"pluginSearchDirs": ["."],

README.md

@@ -1,58 +1,11 @@
-# create-svelte
+## Usage
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+```svelte
+<script>
+	import { Djot } from 'svelte-djot';
 
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+	const text = '{+Hello+} _djot_ from *SvelteKit*!';
+</script>
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
+<Djot {text} />
 ```

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-djot",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run package",
@@ -27,6 +27,7 @@
 		"svelte": "^4.0.0"
 	},
 	"devDependencies": {
+		"@djot/djot": "^0.2.3",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",
@@ -40,6 +41,7 @@
 		"publint": "^0.1.9",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"svelte-djot": "^0.1.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"

src/lib/Djot.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { parse, renderHTML } from '@djot/djot';
+
+	export let text = '';
+
+	const doc = parse(text);
+	const html = renderHTML(doc);
+</script>
+
+{@html html}

src/lib/index.js

@@ -1 +1,3 @@
-// Reexport your entry components here
+import Djot from './Djot.svelte';
+
+export { Djot };

src/routes/+page.svelte

@@ -1,3 +1,8 @@
-<h1>Welcome to your library project</h1>
-<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+	// import { Djot } from '$lib/index.js';
+	import { Djot } from 'svelte-djot';
+
+	const text = '{-Hello-} {+Hola+} _djot_ from *SvelteKit*!';
+</script>
+
+<Djot {text} />