search

distillpub / template

This is the repository for the distill web framework
http://distill.pub/guide/
Apache License 2.0
810 stars 133 forks source link

possible to use <d-math> etc tags in App.svelte (Svelte v3)? #137

Closed hrbigelow closed 3 years ago

hrbigelow commented 3 years ago

Has anyone experimented with using svelte v3 and actually used distill's custom <d-math> etc tags etc inside the .svelte files themselves? I would like to leverage the nice modularity of the .svelte files, but it doesn't work. I've looked through some of the submissions but I didn't see any that used this structure.

Any help would be greatly appreciated! Thank you.

My project structure starts from:

$ npx degit sveltejs/template my_project

which gives:

├── package.json
├── package-lock.json
├── public
│   ├── build
│   │   ├── bundle.css
│   │   ├── bundle.js
│   │   └── bundle.js.map
│   ├── favicon.png
│   ├── global.css
│   └── index.html
├── README.md
├── rollup.config.js
├── scripts
│   └── setupTypeScript.js
└── src
    ├── App.svelte

I tried to edit public/index.html as:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width,initial-scale=1'>

        <title>Svelte app</title>

        <link rel='icon' type='image/png' href='/favicon.png'>
        <link rel='stylesheet' href='/global.css'>
        <link rel='stylesheet' href='/build/bundle.css'>
       <script src="https://distill.pub/template.v2.js"></script>    <!-- <LINE ADDED ================== -->

        <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

and then include tags like <d-math> inside src/App.svelte like:

<script>
        // export let name;
</script>

<main>
    <d-title style="padding-bottom: 0">
        <h1>Introduction to Kernel Regression</h1>
    </d-title>
    <d-byline></d-byline>
    <d-article>
        <p><d-math>\textbf{D} = {(x_i, y_i)}_{i \in (1, \cdots, n)}</d-math></p>
...

But, when I run npm run dev, I get:

[!] (plugin svelte) ParseError: Expecting Unicode escape sequence \uXXXX
src/App.svelte
23: 
24:         <p><d-math>\textbf{D} = {(x_i, y_i)}_{i \in (1, \cdots, n)}</d-math></p>
hrbigelow commented 3 years ago

Hi all, in case anyone is interested, I found a solution. Following the advice from the svelte moderator there @conduitry, you just need to write a simple preprocessor that substitutes '{' and '}' with '{' and '&125;'. Then, the contents of the <d-math> tags pass through and can be processed at load time after the svelte compiler does its thing.

See rollup.config.js