Closed qrac closed 1 year ago
Helmetの中にコンポーネントを置けない様子...。
Invariant Violation: You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information.
コンポーネントを互いにネストしようとしている可能性がありますが、これは許可されていません。詳細はAPIを参照してください。
コンポーネントではなく、参照先のパスによってエントリーするか否かを判定する方法を検討。
import { Head } from "minista"
export default function () {
return (
<>
<Head>
<title>Dynamic Entry</title>
<link rel="stylesheet" href="/src/assets/entry.css" />
<script type="module" src="/src/assets/entry.ts" />
</Head>
</>
)
}
エントリー専用のパス @minista-entry
を書く仕様。data-minista-entry-name
があればnameを上書き。
import { Head } from "minista"
export default function () {
return (
<>
<Head>
<title>Dynamic Entry</title>
<link rel="stylesheet" href="/@minista-entry/src/assets/entry.css" />
<link
rel="stylesheet"
href="/@minista-entry/src/assets/entry2.css"
data-minista-entry-name="test/custom"
/>
<script type="module" src="/@minista-entry/src/assets/entry.ts" />
</Head>
<script
type="module"
src="/@minista-entry/src/assets/entry2.ts"
data-minista-entry-name="test/custom"
/>
</>
)
}
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Entry</title>
<link rel="stylesheet" href="/assets/entry.css">
<link rel="stylesheet" href="/assets/test/custom.css">
<script type="module" src="/assets/entry.js"></script>
</head>
<body>
<script type="module" src="/assets/test/custom.js"></script>
</body>
</html>
Vite v3で、CSSだけassetFileNamesがidではなくfilenameになってしまうバグがあるので、CSSに data-minista-entry-name
が効かない。マージ&アップデート待ち。
/@minista-entry
削ってもファイル存在確認すれば大丈夫だった。Viteのindex.htmlと同じ書き方にできる。
Input
import { Head } from "minista"
export default function () {
return (
<>
<Head>
<title>Dynamic Entry</title>
<link rel="stylesheet" href="/src/assets/entry.css" />
<script type="module" src="/src/assets/entry.ts" />
</Head>
</>
)
}
Output
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Entry</title>
<link rel="stylesheet" href="/assets/entry.css">
<script type="module" src="/assets/entry.js"></script>
</head>
<body>
</body>
</html>
Vite v3で、CSSだけassetFileNamesがidではなくfilenameになってしまうバグがあるので、CSSに data-minista-entry-name が効かない。マージ&アップデート待ち。
こちらがいつまでもマージされないので、独自の修正処理を追加する。
72 で行ったアセットエントリー機能の再設計により、タグの挿入場所やattributesの変更など柔軟なカスタマイズが可能になったが、編集場所がコンフィグとHead内のタグで分かれてしまう問題や、サーバーを再起動しないとアセットエントリーを修正できない問題は残っている。そこで、テンプレート側からダイナミックにアセットをエントリーできないか検討する。