Svelteでネイティブアプリ（Svelte + NativeScript）
komenzarSvelteでのネイティブアプリ開発を調査。ホットロード、TypeScriptの補完が効くのか、など開発体験を知りたい。
komenzarSvelte Native コミュニティページ
Svelte Native • The Svelte Mobile Development Experience
「svelte native」で調べるとまず出てくるのがsvelteコミュニティによって運営されているページ。こちらではSvelte Native は まだ SvelteやNativeScript の公式のプロジェクトではないと書かれている
Svelte Native is developed by members of the Svelte community who wish to have the same smooth development experience on mobile devices as they have on the web. This project is not an officially supported product of either the NativeScript or Svelte projects.
Yet.
NativeScript のSvelteの例
Svelte Tutorial | NativeScript
NativeScriptのドキュメントに Svleteをつかった例が書かれている。「Svelte Native」というものはこれと何が違うのか？
Svelte Native ってあるのか？
JSでモバイルアプリ開発をするフレームワークとして有名なのが "React Native" 。対等さを出すために"Svelte Native" と名乗っているだけで実態は Svelte + NativeScript のことなのだろうか。
komenzarSvelte Tutorial | NativeScriptを進める
パッケージマネージャーを yarn にする
Package managers - NativeScript Docs
ns package-manager set yarn
これはグローバルな設定だから、プロジェクトを始める前にやっておくといい。
komenzarフォーマット周りでトラブル
Prettier, ESLint をセットアップするとアプリが起動しなくなるエラーが起こった
検証１：ESLint だけインストールしてみる
ns create test-svelte-eslint --svelte でインストール。ns run ios で起動は確認。
ESLintのsvelteのセットアップとNativeScriptのセットアップを参考に
yarn add -D eslint-plugin-svelte3 @typescript-eslint/parser @typescript-eslint/eslint-plugin @nativescript/eslint-plugin @typescript-eslint/parser eslint
設定ファイル
module.exports = {
parser: "@typescript-eslint/parser", // add the TypeScript parser
plugins: [
"@nativescript",
'svelte3',
'@typescript-eslint' // add the TypeScript plugin
],
overrides: [ // this stays the same
{
files: ['*.svelte'],
processor: 'svelte3/svelte3'
}
],
rules: {
// ...
},
settings: {
'svelte3/typescript': true, // load TypeScript as peer dependency
// ...
},
extends:["plugin:@nativescript/recommended"],
};
yarn eslint ファイル名 を実行すると動作した
/Users/takuya/develop/NativeScript/check-svelte-eslint/app/components/Home.svelte
8:5 warning A11y: A form label must be associated with a control a11y-label-has-associated-control
✖ 1 problem (0 errors, 1 warning)
✨ Done in 1.35s.
Prettier もインストールしてみる
yarn add -D eslint-plugin-prettier prettier
Prettierの設定ファイル
module.exports = {
semi: false,
tabWidth: 2,
printWidth: 100,
singleQuote: true,
trailingComma: 'all',
jsxSingleQuote: true,
bracketSpacing: true,
}
起動成功！ESLintの@nativescriptプラグインを入れてなかったのが原因のようだ。
komenzarアプリが起動しなかった
ns clean を実行してみる。