Skip to content

Adds vite helpers#725

Merged
damiani merged 13 commits intomainfrom
gc/add-vite
Jun 3, 2025
Merged

Adds vite helpers#725
damiani merged 13 commits intomainfrom
gc/add-vite

Conversation

@gcavanunez
Copy link
Contributor

@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 '@tighten/jigsaw-vite-plugin';

export default defineConfig({
    plugins: [
        jigsaw({
            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
@nicodevs nicodevs requested review from damiani and nicodevs March 7, 2025 17:47
nicodevs
nicodevs approved these changes Mar 7, 2025
View reviewed changes
Copy link
Contributor

@nicodevs nicodevs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good! (Many changes were just for code styling and format fixes.)

I followed the steps in the PR and got Jigsaw up and running with Vite. HMR worked as expected.

Excited to see Vite replacing Mix/Webpack in Jigsaw!

@nicodevs
Copy link
Contributor

nicodevs commented Mar 10, 2025

@gcavanunez I'm working on a PR to update the stubs. I'll let you know when it's done so we can merge it into this branch.

@nicodevs nicodevs self-requested a review March 10, 2025 22:15
nicodevs and others added 4 commits March 10, 2025 22:37
@nicodevs
Add PostCSS file
8edc1ea
@nicodevs
Restore hot file
a4780c3
@nicodevs
WIP
174d5d8
@github-actions
Format
7b1a7d4 
..✓..............✓.✓..............✓.........................................
........................................

──────────────────────────────────────────────────────────────────── Laravel
FIXED .................................. 116 files, 4 style issues fixed
✓ tests/FilesystemTest.php php_unit_method_casing
✓ tests/HelpersTest.php php_unit_method_casing
✓ tests/IterableObjectTest.php class_definition, php_unit_method_casing, br…
✓ tests/PaginationTest.php php_unit_method_casing
)
@tomasnorre
Copy link
Contributor

tomasnorre commented Apr 8, 2025

I would love if this gets merged, so that I could switch to vite for my jigsaw pages.

@husseinalhammad
Copy link
Contributor

husseinalhammad commented Jun 3, 2025

How can we help get this over the line?

@damiani
Copy link
Contributor

damiani commented Jun 3, 2025

I'll look this over today and get it merged!

@damiani damiani merged commit d51fa78 into main Jun 3, 2025
5 checks passed
@damiani damiani deleted the gc/add-vite branch June 3, 2025 15:09
@tomasnorre
Copy link
Contributor

tomasnorre commented Jun 4, 2025 •
edited
Loading

Thanks a bunch for the work and merging this. Will the documentation get a section on how to upgrade to vite? I'm having troubles getting it to work, running into problems with postcss-import

@tomasnorre tomasnorre mentioned this pull request Jun 4, 2025
Closed
@tomasnorre tomasnorre mentioned this pull request Jun 4, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@damiani damiani Awaiting requested review from damiani

@nicodevs nicodevs Awaiting requested review from nicodevs

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@gcavanunez @nicodevs @tomasnorre @husseinalhammad @damiani