qrac commented 1 year ago

72 で行ったアセットエントリー機能の再設計により、タグの挿入場所やattributesの変更など柔軟なカスタマイズが可能になったが、編集場所がコンフィグとHead内のタグで分かれてしまう問題や、サーバーを再起動しないとアセットエントリーを修正できない問題は残っている。そこで、テンプレート側からダイナミックにアセットをエントリーできないか検討する。

import { Head, Entry } from "minista"

export default function () {
  return (
    <>
      <Head>
        <Entry rel="stylesheet" href="/src/assets/style.css" />
        <Entry type="module" src="/src/assets/script.ts" />
      </Head>
      <section>
        <h1>index</h1>
      </section>
    </>
  )
}

qrac commented 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を参照してください。

qrac commented 1 year ago

コンポーネントではなく、参照先のパスによってエントリーするか否かを判定する方法を検討。

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>
    </>
  )
}

qrac commented 1 year ago

エントリー専用のパス @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>

qrac commented 1 year ago

Vite v3で、CSSだけassetFileNamesがidではなくfilenameになってしまうバグがあるので、CSSに data-minista-entry-name が効かない。マージ＆アップデート待ち。

qrac commented 1 year ago

/@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>

qrac commented 1 year ago

Vite v3で、CSSだけassetFileNamesがidではなくfilenameになってしまうバグがあるので、CSSに data-minista-entry-name が効かない。マージ＆アップデート待ち。

こちらがいつまでもマージされないので、独自の修正処理を追加する。

qrac / minista

テンプレートからのアセットエントリーを実装 #106