【保留】Plugin3.　Preline UI_環境構築検証 - Paku-Soba/Svelte-example-app GitHub Wiki

※検討する為の技術検証にどれくらいコストかけるか、判断基準が必要である。

→ 優先度低い為、後回しにする。他のUIデザインで検証が必要になった時、再度検証を続ける可能性あり。

Tailwind CSSプラグインとしてPreline UI環境構築検証

　◾️ Preline UIインストール及び設定方法手順

  • プロジェクト起動時、npm run dev -- --openエラー発生。解決方法考える。
    • src/app.htmlファイルにてscriptタグ設定Preline UI JavaScriptファイル埋め込み。
<body data-sveltekit-preload-data="hover">
   ...
   <script src="%sveltekit.assets%/preline/preline.js"></script>
</body>

Add the Preline UI JavaScript Include Preline UI JavaScript to the projects_root_directory/src/app.html file.

  • tailwindcss.config.jsファイルにて設定contentプロパティのmodules内容修正
export default {
  content: ['./src/**/*.{html,js,svelte,ts}','./node_modules/preline/dist/*.{html,js,svelte,ts}'],
・・・
  • エラー内容　Not found: /preline/preline.js
    • preline/preline.jsファイルはどこから呼び出している？どこにある？
      • config設定見直す。
      • 設定見直したが、npm run dev -- --open時のエラーは解消されず。
        • Preline UIのコンポーネントは使用できる状態。
        • コンポーネントは使用できる状態の為、エラー解決は後回し、取り急ぎDark Mode検証を進める。
          • ただし、設定状況により使用できないコンポーネントがあるかもしれない。
          • その可能性も踏まえて検証を進めてみる。
            • 検証がうまくいかなかった場合、うまくいかなかった原因が今回発生したエラーが原因かどうか明確ではない為
            • SveltekitプロジェクトでのPreline UIインストール及び反映使用含み再度設定を見直す。

https://stackoverflow.com/questions/76322961/prelineui-plugin-not-working-causing-a-few-components-which-uses-javascript-to

https://qiita.com/Kaos_laboratory/items/c9df35a276a32873ec93

https://medium.com/@FArcieri/install-praline-ui-on-sveltekit-9af72b988744

SvelteKitError: Not found: /preline/preline.js
    at resolve (/Users/mac-mr9v2j001/Documents/GitHub/Svelte-SampleApp/node_modules/@sveltejs/kit/src/runtime/server/respond.js:485:13)
    at resolve (/Users/mac-mr9v2j001/Documents/GitHub/Svelte-SampleApp/node_modules/@sveltejs/kit/src/runtime/server/respond.js:285:5)
    at #options.hooks.handle (/Users/mac-mr9v2j001/Documents/GitHub/Svelte-SampleApp/node_modules/@sveltejs/kit/src/runtime/server/index.js:59:56)
    at Module.respond (/Users/mac-mr9v2j001/Documents/GitHub/Svelte-SampleApp/node_modules/@sveltejs/kit/src/runtime/server/respond.js:282:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  status: 404,
  text: 'Not Found'
}

Quick setup This guide will help you get started with Preline UI, including how to run, customize, update, and integrate your project!

First, you need to make sure that you have a working Tailwind CSS project installed and that you also have Node and NPM installed on your machine.

Preline UI Installation

Install Preline UI with Svelte using Tailwind CSS

  • Setting up Preline UI in a Svelte project using Tailwind CSS.
  • Quick Svelte setup
    • Svelte is a JS framework for building fast, efficient web apps. If you haven't set up Tailwind CSS yet, check out SvelteKit Tailwind CSS installation guides.

https://stackblitz.com/edit/preline-v2-svelte?file=tailwind.config.js

Preline UI - License

  • ライセンス内容確認しておく。

Preline UI is released under the MIT license and is copyright 2023 Htmlstream. Boiled down to smaller chunks, it can be described with the following conditions.

MIT License Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

It requires you to: Keep the license and copyright notice included in Preline UI's CSS and JavaScript files when you use them in your works If the source code is downloaded and used as a JS script, follow the terms of the MIT license It permits you to: Freely download and use Preline UI, in whole or in part, for personal, private, company internal, or commercial purposes Use Preline UI in packages or distributions that you create Modify the source code Grant a sublicense to modify and distribute Preline UI to third parties not included in the license It forbids you to: Hold the authors and license owners liable for damages as Preline UI is provided without warranty Hold the creators or copyright holders of Preline UI liable Redistribute any piece of Preline UI without proper attribution Use any marks owned by Htmlstream in any way that might state or imply that Htmlstream endorses your distribution Use any marks owned by Htmlstream in any way that might state or imply that you created the Htmlstream software in question It does not require you to: Include the source of Preline UI itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it Submit changes that you make to Preline UI back to the Preline UI project (though such feedback is encouraged) Credit Preline UI when using HTML components only

⚠️ **GitHub.com Fallback** ⚠️