elm-spa-exampleのコードを読む
elmでのSPAアプリの基本になっているらしい。
これのコードを読んでいく
同様にコードリーディングしている記事がいくつかあったので、これらも参考にしていく
https://www.youtube.com/watch?v=DoA4Txr4GUs
とりあえずディレクトリ構成
code: tree
$ tree . -L 2
.
├── LICENSE
├── README.md
├── assets
│ ├── icons
│ ├── images
│ └── site.webmanifest
├── elm-stuff
│ └── 0.19.0
├── elm.js
├── elm.json
├── index.html
├── src
│ ├── Api
│ ├── Api.elm
│ ├── Article
│ ├── Article.elm
│ ├── Asset.elm
│ ├── Author.elm
│ ├── Avatar.elm
│ ├── CommentId.elm
│ ├── Email.elm
│ ├── Loading.elm
│ ├── Log.elm
│ ├── Main.elm
│ ├── Page
│ ├── Page.elm
│ ├── PaginatedList.elm
│ ├── Profile.elm
│ ├── Route.elm
│ ├── Session.elm
│ ├── Timestamp.elm
│ ├── Username.elm
│ └── Viewer.elm
└── tests
├── RoutingTests.elm
└── elm-package.json
とりあえずルート直下から
elm.jsはbuildして作られたやつ
index.htmlがエントリポイント
中を見てみる
code: index.html
<!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
<link rel="stylesheet" href="//demo.productionready.io/main.css">
code: index.html
<body>
<script>
var storageKey = "store";
var flags = localStorage.getItem(storageKey);
var app = Elm.Main.init({flags: flags});
app.ports.storeCache.subscribe(function(val) {
if (val === null) {
localStorage.removeItem(storageKey);
} else {
localStorage.setItem(storageKey, JSON.stringify(val));
}
// Report that the new session was stored succesfully.
setTimeout(function() { app.ports.onStoreChange.send(val); }, 0);
});
// Whenever localStorage changes in another tab, report it if necessary.
window.addEventListener("storage", function(event) {
if (event.storageArea === localStorage && event.key === storageKey) {
app.ports.onStoreChange.send(event.newValue);
}
}, false);
</script>
</body>
localStorageでstorageKeyを色々やっている様子, コメントみる感じログイン用のsessionとかを管理している?、elmコードのsubscribeらへん見ればわかるかな?
srcディレクトリ以下