Svelte 使ってるけど良い感じ。でもドキュメントが微妙過ぎて終わってる - Svelte Vol.1

表題の通り。公式サイトは御託だらけで読みづらいくせして情報が色々足りない
色々苦労したのでメモがてらに皆に共有

(※ あくまで個人ユースで遊びで使っている限りはイケている感じ
これを本格的なプロジェクトにぶっこんで規模のデカいものを開発した時
React みたいな悲惨なことにならんかどうかはまだ解らず)

SvelteKit

プロジェクト起こすにはコイツ。Vue みたいに CDN から読んでちょろっと試すとかは出来無い

プロジェクト作成 & 開発サーバ起動

npm create svelte@latest test
cd test
npm i
npm run dev

Skeleton project
Type Script なんぞ時間の余っている知ったかぶりクソ Noob 以外は使わなくて良し
その他も要らん

訳のわからんポートで立ち上がるので 8080 で起動し localhost 以外からアクセスしたい

npm run dev --host 0.0.0.0 --port 8080

クソめんどいので、package.json に以下を追加

"s": "vite dev  --host 0.0.0.0 --port 8080",

さらにバカめんどいので、yarn で叩く
さらに zshrc に alias を追加

alias y='yarn'

y s

ヨシ

alias nr='npm run'

もオススメしたい

Pug & SCSS

HTML とかブレインデッドなバカの書くもの
CSS もダルさ爆発

SvelteKit はサクッと Pug と SCSS をサポートしてくれる！最高！！

npm i -D svelte-preprocess pug sass

svelte.config.js

import preprocess from 'svelte-preprocess'; <- 追加

const config = {
  preprocess: preprocess(), <- 追加

たったこれだけで、こんな風に書ける！
ゴイゴイスーを差し上げたいんだが、千鳥 -> かまいたちの大ブレイクと来たが、ダイアンはそこまで行か無いと思うなぁ
ちーちゃんとからんだりしてるとことかおもろいしんだけどももっとほかのすとりーまーとからんだほうがいいんじゃないかｎ・・・

<script>
  console.log('hoge')
</script>
<template lang="pug">
  h1 HOGE
</template>
<style lang="scss">
  $color: red;
  h1 {
    color: $color;
  }
</style>

ページを追加

src/routes/hoge/+page.svelte

/hoge が追加される

+hoge.svelte じゃダメ(昔はこれも良かったんだがバカが封じた)

vi

全く空気が読めていないクソみたいな + が先頭に付くファイルを vi で開こうとすると

Error detected while processing command line:
E492: Not an editor command: page.svelte

とエラー吐いて死ぬ

zshrc に以下を追加しろ

alias vi='vi --'

Plugin は

https://github.com/leafOfTree/vim-svelte-plugin
https://github.com/digitaltoad/vim-pug

あたりを入れると良し
そして、.vimrc に

let g:vim_svelte_plugin_use_pug=1
let g:vim_svelte_plugin_use_sass=1

を追加すると良い
ただ注意として

<template lang="pug">

とダブルクォーテーションで囲うこと
'pug' で囲っていて最初色が付かないなぁと思っていたが、
Plugin のコードで "pug" にしかマッチしないようになっていた
Pluginのコードを書いている作者はシングルクォートで囲いたがる派閥っぽいんだけどもなぁ

とりあえず導入はこんな感じ
次回以降にもっと詳しく掘り進めていくぜ！
ドリルキングだ！

強まっていこう

あっちゃこっちゃへ強まっていくためのブログです。