Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds vite helpers #725

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Adds vite helpers #725

wants to merge 2 commits into from

Conversation

gcavanunez
Copy link

@gcavanunez gcavanunez commented Feb 20, 2025 •
edited
Loading

Highlights

  • adds the @viteRefresh() blade directive for the purpose of adding the vite client script
  • adds vite helper methods that play a similar role to the mix helper method
  • Related repo - jigsaw-vite-plugin

How to Test

Here's a sample repo of the integration working.

Steps by step

  • mkdir jigsaw-vite && cd jigsaw-vite
  • composer require tightenco/jigsaw:dev-gc/add-vite
  • vendor/bin/jigsaw init
  • npm i -D vite @tighten/jigsaw-vite-plugin
  • add "type": "module" to your package.json
  • Add the following file to the root vite.config.js
import { defineConfig } from 'vite';
import jigsaw from 'jigsaw-vite-plugin';

export default defineConfig({
    plugins: [
        jigsawPlugin({
            input: ['source/_assets/js/main.js', 'source/_assets/css/main.css'],
            refresh: true,
        }),
    ],
});
  • Add the following scripts to your package.json
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
  • since the default jigsaw init scaffolds a v3 tailwindcss project we'll need to also
 npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

and in the postcss.config.js should look like:

export default {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
}
  • tweak the source/_layouts/main.blade.php - here we're adding the @viteRefresh & the link + script tag, while removing the mix related code
<!DOCTYPE html>
<html lang="{{ $page->language ?? 'en' }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="canonical" href="{{ $page->getUrl() }}">
        <meta name="description" content="{{ $page->description }}">
        <title>{{ $page->title }}</title>
        @viteRefresh()
        <link rel="stylesheet" href="{{ vite('source/_assets/css/main.css') }}">
        <script defer type="module" src="{{ vite('source/_assets/js/main.js') }}"></script>
    </head>
    <body class="text-gray-900 font-sans antialiased">
        @yield('body')
    </body>
</html>
  • npm run dev - and either access it via valet at jigsaw-vite.test or run ./vendor/bin/jigsaw serve

Notes

Was initially leaning into mocking the hotFilePath() from the Vite class however it started to feel a little gross vs setting up the source proj and leaning into createSource(..). The createSource helps plays a similar role to how Laravel's Vite integration mocked the Filesystem.

Though arguably now it could be strictly a few helper functions or static methods in Vite class, I do like leaning into the Container to access the Vite methods

@gcavanunez gcavanunez force-pushed the gc/add-vite branch 3 times, most recently from 2e68caa to ca1f7f0 Compare February 22, 2025 00:42
@github-actions
Format
9868d4f 
.✓✓..✓...✓.✓.✓..........✓...✓..✓✓....................✓.....✓........✓..✓....
.................✓..✓..........✓........

──────────────────────────────────────────────────────────────────── Laravel
FIXED ................................. 116 files, 17 style issues fixed
✓ src/Collection/Collection.php new_with_parentheses, unary_operator_spaces…
✓ src/Console/BuildCommand.php new_with_parentheses, unary_operator_spaces,…
✓ src/Events/EventBus.php new_with_parentheses
✓ src/File/TemporaryFilesystem.php new_with_parentheses
✓ src/Scaffold/PresetPackage.php new_with_parentheses, unary_operator_space…
✓ src/SiteData.php new_with_parentheses
✓ src/Support/helpers.php new_with_parentheses, no_superfluous_phpdoc_tags,…
✓ tests/CustomCommandTest.php new_with_parentheses
✓ tests/CustomScaffoldInstallerTest.php new_with_parentheses
✓ tests/DefaultScaffoldInstallerTest.php new_with_parentheses
✓ tests/DotInFileNameTest.php new_with_parentheses
✓ tests/FilePathTest.php new_with_parentheses
✓ tests/InitCommandTest.php new_with_parentheses
✓ tests/PhpOpenTagInMarkdownTest.php new_with_parentheses
✓ tests/PresetScaffoldBuilderTest.php new_with_parentheses
✓ tests/SnapshotsTest.php new_with_parentheses, php_unit_method_casing, una…
✓ tests/TestCase.php new_with_parentheses, class_definition, braces_positio…
)
@gcavanunez gcavanunez marked this pull request as ready for review February 22, 2025 01:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@gcavanunez