Svelte + Pug + Stylusがいい！ [ WEB ]

前回はブログっぽいことを書いてしまって、役に立たない内容なので、今回はセットアップを残そうと思うのです。

Svelte

これについてはまだ始めたばかりなので、よくわかってませんが、PugとStylusを使うことだけは決めてます。

Svelte自体やセットアップについては世の中の詳しい人に聞きましょう！

Pug と Stylus を使うには

PugやStylusを使うにはsvelte-preprocessをインストールすればいいらしい。

Getting Startedを参考にセットアップしていこう！

開発環境のセットアップと"svelte-preprocess"のインストール
$ npx degit sveltejs/template myApp
$ cd myApp
$ npm install -D svelte-preprocess    

"Pug"および"Stylus"のインストール
$ npm install -D pug
$ npm install -D stylus    

次に rollup.config.js に修正を加えるのです。

"rollup.config.js"の追加修正

import sveltePreprocess from 'svelte-preprocess';
...
export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
  },
  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production
      }
    }),
...

バージョン違いで、ちょっと内容が異なるみたいだけどこんな感じで大丈夫でした。

Svelteのコーディング例(フォーム部分)
<template lang="pug">
main
    h1 super
    +if("fullName")
        h2 Wellcome to my Appplication!!
        h3 Hello,{fullName}!!
        customForm(userName="{fullName}")
        +else()
        h2 Please, input your name...
        form(on:submit|preventDefault="{handleSubmit}")
            div: input(bind:this="{lastNameForm}", bind:value="{lastName}", type="text", placeholder="姓", required)
            div: input(bind:value="{firstName}", type="text", placeholder="名", required)
            button(type="submit") ログイン
            
style(lang="stylus").
    :global(body)
        color #FFF
        background #000
    main
        text-align center
        padding 1em
        max-width 800px
        margin 0 auto
        background #333
        color #FFF
        
        input
            color #FFF
            background #053
</template>    

これで、PugもStylusも使えるようになりました。

ちなみにフォームの部分は<template lang="pug">で囲みましょう！そうしないと、認識しませんので。。。

Stylusを使いたいときは属性に lang="stylus" と書くことによって認識してくれるみたいです。

また、<template>タグの外に<style lang="stylus>タグを使って書いてもOK！です。

すばらしい！！パチパチパチパチ★

注意点？

◆属性値はクォーテーションで囲む

属性のSvelte変数はクォーテーション(')またはダブルクォーテーション(")で囲わないと、Pugによって変数展開されてしまうので注意です！

✕ input(bind:value={name})
○ input(bind:value="{name}")

◆属性値はエスケープされないように "!=" を使う

属性値に "&" "<" ">" などの文字が含まれると、PugによってHTMLエンティティにエンコードされてしまうので、"!=" を使ってエスケープを阻止しましょ。

✕ button(on:click="{() => remove(index)}") 削除
○ button(on:click!="{() => remove(index)}") 削除

◆条件分岐等のブロックは +if(), +else(), +elseif(), +each()... 等を使う

Svelteの条件分岐等のブロックの書式がPugの書式違反になってしまうので、専用のMixinを使おう！詳しくは Preprocessing を見よう！

✕
  {#if user.loggedIn}
    h1 Hello, {user.name}!!
  {:else}
    button(on:click="{login()}") ログイン
  {/if}
  
○
  +if('user.loggedIn')
    h1 Hello, {user.name}!!
    +else()
    button(on:click="{login()}") ログイン

ふんどしの持ち主

• sveltejs/svelte-preprocess