diff --git a/packages/realtime-compiler/resources/vite-index-page.html b/packages/realtime-compiler/resources/vite-index-page.html
new file mode 100644
index 00000000000..aee5828f9c3
--- /dev/null
+++ b/packages/realtime-compiler/resources/vite-index-page.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
HydePHP Vite
+
+
+
+
+
+
+
+
+
+
+
+
+
This is the Vite development server that provides Hot Module Replacement for your HydePHP site.
+
Your HydePHP site is running on the Realtime Compiler server.
+
+
The main development server for your HydePHP site.
+
+
Access the realtime compiler dashboard to monitor your site.
+
+
+
+ Your HydePHP site is running at:
+ http://localhost:8080
+
+
Want to learn more about HydePHP?
+
+ Read the docs →
+
+
+
+
+
+
+
+
diff --git a/packages/realtime-compiler/src/Actions/AssetFileLocator.php b/packages/realtime-compiler/src/Actions/AssetFileLocator.php
index d7ad8c57165..5805306c26d 100644
--- a/packages/realtime-compiler/src/Actions/AssetFileLocator.php
+++ b/packages/realtime-compiler/src/Actions/AssetFileLocator.php
@@ -4,8 +4,6 @@
namespace Hyde\RealtimeCompiler\Actions;
-use Illuminate\Support\Str;
-
/**
* Locate a static file to proxy.
*/
@@ -15,19 +13,8 @@ public static function find(string $path): ?string
{
$path = trim($path, '/');
- $strategies = [
- BASE_PATH.'/_site/'.$path,
- BASE_PATH.'/_media/'.$path,
- BASE_PATH.'/_site/'.Str::after($path, 'media/'),
- BASE_PATH.'/_media/'.Str::after($path, 'media/'),
- ];
-
- foreach ($strategies as $strategy) {
- if (file_exists($strategy)) {
- return $strategy;
- }
- }
+ $file = BASE_PATH.'/_media/'.str_replace('media/', '', $path);
- return null;
+ return file_exists($file) ? $file : null;
}
}
diff --git a/packages/realtime-compiler/src/ConsoleOutput.php b/packages/realtime-compiler/src/ConsoleOutput.php
index 99868f6254c..e756e026a76 100644
--- a/packages/realtime-compiler/src/ConsoleOutput.php
+++ b/packages/realtime-compiler/src/ConsoleOutput.php
@@ -5,6 +5,7 @@
namespace Hyde\RealtimeCompiler;
use Closure;
+use Hyde\Facades\Vite;
use Hyde\Hyde;
use Illuminate\Support\Str;
use Illuminate\Support\Arr;
@@ -24,7 +25,7 @@ public function __construct(bool $verbose = false, ?SymfonyOutput $output = null
$this->output = $output ?? new SymfonyOutput();
}
- public function printStartMessage(string $host, int $port, array $environment = []): void
+ public function printStartMessage(string $host, int $port, array $environment = [], ?bool $willUseVite = false): void
{
$url = sprintf('%s://%s:%d', $port === 443 ? 'https' : 'http', $host, $port);
@@ -35,6 +36,8 @@ public function printStartMessage(string $host, int $port, array $environment =
sprintf('
Listening on: %s', $url, $url),
(config('hyde.server.dashboard.enabled') || Arr::has($environment, 'HYDE_SERVER_DASHBOARD')) && Arr::get($environment, 'HYDE_SERVER_DASHBOARD') === 'enabled' ?
sprintf('
Live dashboard: %s/dashboard', $url, $url) : null,
+ (Vite::running() || $willUseVite) ?
+ sprintf('
Vite HMR server: http://%s:5173', $host, $host) : null,
'',
]);
diff --git a/packages/realtime-compiler/src/Routing/PageRouter.php b/packages/realtime-compiler/src/Routing/PageRouter.php
index 7f83a75eb05..24847498d19 100644
--- a/packages/realtime-compiler/src/Routing/PageRouter.php
+++ b/packages/realtime-compiler/src/Routing/PageRouter.php
@@ -11,7 +11,6 @@
use Hyde\Framework\Actions\StaticPageBuilder;
use Hyde\RealtimeCompiler\Http\LiveEditController;
use Hyde\Framework\Exceptions\RouteNotFoundException;
-use Hyde\Framework\Features\Documentation\DocumentationSearchPage;
use Hyde\Pages\Concerns\HydePage;
use Hyde\RealtimeCompiler\Concerns\SendsErrorResponses;
use Hyde\RealtimeCompiler\Http\DashboardController;
@@ -82,12 +81,6 @@ public static function handle(Request $request): Response
protected function getPageFromRoute(): HydePage
{
- if (\Hyde\unslash($this->request->path) === DocumentationSearchPage::routeKey() && DocumentationSearchPage::enabled()) {
- // Since this page is not present within the search index (as it's normally generated by a build task)
- // we instantiate and return it here.
- return new DocumentationSearchPage();
- }
-
try {
return Routes::getOrFail($this->normalizePath($this->request->path))->getPage();
} catch (RouteNotFoundException $exception) {
diff --git a/packages/realtime-compiler/src/Routing/Router.php b/packages/realtime-compiler/src/Routing/Router.php
index 963d3cef51c..9fb7dcf5e46 100644
--- a/packages/realtime-compiler/src/Routing/Router.php
+++ b/packages/realtime-compiler/src/Routing/Router.php
@@ -11,7 +11,6 @@
use Hyde\RealtimeCompiler\Concerns\SendsErrorResponses;
use Hyde\RealtimeCompiler\Models\FileObject;
use Hyde\RealtimeCompiler\Concerns\InteractsWithLaravel;
-use Hyde\Framework\Actions\GeneratesDocumentationSearchIndex;
class Router
{
@@ -63,6 +62,11 @@ protected function shouldProxy(Request $request): bool
return false;
}
+ // Don't proxy the search.json file, as it's generated on the fly.
+ if (str_ends_with($request->path, 'search.json')) {
+ return false;
+ }
+
// The page is not a web page, so we assume it should be proxied.
return true;
}
@@ -72,10 +76,6 @@ protected function shouldProxy(Request $request): bool
*/
protected function proxyStatic(): Response
{
- if ($this->request->path === '/docs/search.json') {
- $this->generateSearchIndex();
- }
-
$path = AssetFileLocator::find($this->request->path);
if ($path === null) {
@@ -91,14 +91,4 @@ protected function proxyStatic(): Response
'Content-Length' => $file->getContentLength(),
]);
}
-
- /**
- * Generate the documentation search index.
- */
- protected function generateSearchIndex(): void
- {
- $this->bootApplication();
-
- GeneratesDocumentationSearchIndex::handle();
- }
}
diff --git a/packages/realtime-compiler/tests/RealtimeCompilerTest.php b/packages/realtime-compiler/tests/RealtimeCompilerTest.php
index 2c001eaeca7..c40358ce39f 100644
--- a/packages/realtime-compiler/tests/RealtimeCompilerTest.php
+++ b/packages/realtime-compiler/tests/RealtimeCompilerTest.php
@@ -49,11 +49,6 @@ public function testHandlesRoutesIndexPage()
$this->assertEquals(200, $response->statusCode);
$this->assertEquals('OK', $response->statusMessage);
$this->assertStringContainsString('
Welcome to HydePHP!', $response->body);
-
- $this->assertFileExists(hyde()->path('_site/index.html'));
- $this->assertEquals($response->body, Filesystem::get('_site/index.html'));
-
- Filesystem::unlink('_site/index.html');
}
public function testHandlesRoutesCustomPages()
@@ -71,13 +66,10 @@ public function testHandlesRoutesCustomPages()
$this->assertStringContainsString('
Hello World!
', $response->body);
Filesystem::unlink('_pages/foo.md');
- Filesystem::unlink('_site/foo.html');
}
public function testHandlesRoutesPagesWithHtmlExtension()
{
- $this->mockRoute('foo.html');
-
Filesystem::put('_pages/foo.md', '# Hello World!');
$kernel = new HttpKernel();
@@ -89,12 +81,12 @@ public function testHandlesRoutesPagesWithHtmlExtension()
$this->assertStringContainsString('
Hello World!
', $response->body);
Filesystem::unlink('_pages/foo.md');
- Filesystem::unlink('_site/foo.html');
}
public function testHandlesRoutesStaticAssets()
{
- $this->mockRoute('media/app.css');
+ $this->mockRoute('media/test.css');
+ Filesystem::put('_media/test.css', 'test');
$kernel = new HttpKernel();
$response = $kernel->handle(new Request());
@@ -102,7 +94,25 @@ public function testHandlesRoutesStaticAssets()
$this->assertInstanceOf(Response::class, $response);
$this->assertEquals(200, $response->statusCode);
$this->assertEquals('OK', $response->statusMessage);
- $this->assertEquals(file_get_contents(\Hyde\Hyde::path('_media/app.css')), $response->body);
+ $this->assertEquals('test', $response->body);
+
+ Filesystem::unlink('_media/test.css');
+ }
+
+ public function testNormalizesMediaPath()
+ {
+ $this->mockRoute('media/test.css');
+ Filesystem::put('_media/test.css', 'test');
+
+ $kernel = new HttpKernel();
+ $response = $kernel->handle(new Request());
+
+ $this->assertInstanceOf(Response::class, $response);
+ $this->assertEquals(200, $response->statusCode);
+ $this->assertEquals('OK', $response->statusMessage);
+ $this->assertEquals('test', $response->body);
+
+ Filesystem::unlink('_media/test.css');
}
public function testThrowsRouteNotFoundExceptionForMissingRoute()
@@ -144,7 +154,6 @@ public function testTrailingSlashesAreNormalizedFromRoute()
$this->assertStringContainsString('
Hello World!
', $response->body);
Filesystem::unlink('_pages/foo.md');
- Filesystem::unlink('_site/foo.html');
}
public function testDocsUriPathIsReroutedToDocsIndex()
@@ -162,12 +171,12 @@ public function testDocsUriPathIsReroutedToDocsIndex()
$this->assertStringContainsString('HydePHP Docs', $response->body);
Filesystem::unlink('_docs/index.md');
- Filesystem::unlink('_site/docs/index.html');
}
public function testDocsSearchRendersSearchPage()
{
$this->mockRoute('docs/search');
+ Filesystem::put('_docs/index.md', '# Hello World!');
$kernel = new HttpKernel();
$response = $kernel->handle(new Request());
@@ -177,7 +186,7 @@ public function testDocsSearchRendersSearchPage()
$this->assertEquals('OK', $response->statusMessage);
$this->assertStringContainsString('Search the documentation site', $response->body);
- Filesystem::unlink('_site/docs/search.html');
+ Filesystem::unlink('_docs/index.md');
}
public function testPingRouteReturnsPingResponse()
diff --git a/packages/testing/src/MocksKernelFeatures.php b/packages/testing/src/MocksKernelFeatures.php
index 3f89d509021..3e942a12419 100644
--- a/packages/testing/src/MocksKernelFeatures.php
+++ b/packages/testing/src/MocksKernelFeatures.php
@@ -42,11 +42,13 @@ protected function withPages(array $pages): static
return $this;
}
- protected function setupTestKernel(): void
+ protected function setupTestKernel(): TestKernel
{
$this->kernel = new TestKernel();
HydeKernel::setInstance($this->kernel);
+
+ return $this->kernel;
}
}
diff --git a/packages/testing/src/ResetsApplication.php b/packages/testing/src/ResetsApplication.php
index f5db985f41f..92ae901f402 100644
--- a/packages/testing/src/ResetsApplication.php
+++ b/packages/testing/src/ResetsApplication.php
@@ -6,6 +6,7 @@
use Hyde\Facades\Filesystem;
use Hyde\Hyde;
+use Hyde\Enums\Feature;
trait ResetsApplication
{
@@ -50,6 +51,26 @@ protected function restoreDefaultPages(): void
copy(Hyde::vendorPath('resources/views/pages/404.blade.php'), Hyde::path('_pages/404.blade.php'));
}
+ /** @experimental We may want to make this a part of {@see static::withoutDefaultPages()} */
+ protected function withoutDocumentationSearch(): void
+ {
+ $features = config('hyde.features');
+
+ $features = array_filter($features, fn (Feature $feature): bool => $feature !== Feature::DocumentationSearch);
+
+ config(['hyde.features' => $features]);
+ }
+
+ /** @experimental We may want to make this a part of {@see static::restoreDefaultPages()} */
+ protected function restoreDocumentationSearch(): void
+ {
+ $features = config('hyde.features');
+
+ $features[] = Feature::DocumentationSearch;
+
+ config(['hyde.features' => $features]);
+ }
+
protected static function unlinkUnlessDefault(string $filepath): void
{
$protected = [
diff --git a/packages/testing/src/TestCase.php b/packages/testing/src/TestCase.php
index 7631c1cf80e..74ba0b9243e 100644
--- a/packages/testing/src/TestCase.php
+++ b/packages/testing/src/TestCase.php
@@ -4,7 +4,6 @@
namespace Hyde\Testing;
-use Hyde\Facades\Features;
use Illuminate\View\Component;
use LaravelZero\Framework\Testing\TestCase as BaseTestCase;
@@ -40,8 +39,6 @@ protected function tearDown(): void
Component::forgetFactory();
}
- Features::clearMockedInstances();
-
parent::tearDown();
}
}
diff --git a/packages/testing/src/UnitTestCase.php b/packages/testing/src/UnitTestCase.php
index 90f1b141a80..3314280c698 100644
--- a/packages/testing/src/UnitTestCase.php
+++ b/packages/testing/src/UnitTestCase.php
@@ -36,6 +36,13 @@ public static function setUpBeforeClass(): void
public static function tearDownAfterClass(): void
{
+ // Todo: Ensure all tests properly clean up after themselves
+ Mockery::close();
+
+ if (Mockery::getContainer()->getMocks()) {
+ self::markTestIncomplete('Mockery expectations were not verified and state was not reset.');
+ }
+
if (app()->bound(Filesystem::class) && app()->make(Filesystem::class) instanceof Mockery\MockInterface) {
app()->forgetInstance(Filesystem::class);
}
diff --git a/packages/testing/src/UsesRealBladeInUnitTests.php b/packages/testing/src/UsesRealBladeInUnitTests.php
new file mode 100644
index 00000000000..30e1af963d2
--- /dev/null
+++ b/packages/testing/src/UsesRealBladeInUnitTests.php
@@ -0,0 +1,38 @@
+register('blade', function () use ($filesystem) {
+ return new CompilerEngine(
+ new BladeCompiler($filesystem, sys_get_temp_dir())
+ );
+ });
+
+ $finder = new FileViewFinder($filesystem, [Hyde::vendorPath('resources/views')]);
+ $finder->addNamespace('hyde', Hyde::vendorPath('resources/views'));
+
+ $view = new Factory($resolver, $finder, new Dispatcher());
+
+ app()->instance('view', $view);
+ app()->instance(FactoryContract::class, $view);
+ }
+}
diff --git a/packages/ui-kit/README.md b/packages/ui-kit/README.md
index 487c5208457..ef72372c3f4 100644
--- a/packages/ui-kit/README.md
+++ b/packages/ui-kit/README.md
@@ -7,7 +7,7 @@
The HydePHP UI Kit is a collection of minimalistic and un-opinionated TailwindCSS components for Laravel Blade,
indented to be used with HydePHP. Note that these components may require CSS classes not present in the bundled app.css
-file and that you may need to recompile the CSS file using the included Laravel Mix configuration.
+file and that you may need to recompile the CSS file using the included Tailwind and Vite configuration.
## Installation
@@ -24,7 +24,7 @@ Since HydePHP already comes with several built-in views and templates, including
Once installed, the package service provider will automatically register the Blade components for you to use.
You can then use the components and layouts when crafting your custom Blade pages.
-You might also need to recompile the CSS file using the Laravel Mix configuration included with Hyde.
+You might also need to recompile the CSS file using the Tailwind and Vite configuration included with Hyde.
You can see a list of all available components in the [documentation](https://hydephp.github.io/ui-kit/).
diff --git a/packages/ui-kit/docs/documentation.md b/packages/ui-kit/docs/documentation.md
index 946c82e3a73..fb794676b0f 100644
--- a/packages/ui-kit/docs/documentation.md
+++ b/packages/ui-kit/docs/documentation.md
@@ -6,7 +6,7 @@ title: Documentation
The HydePHP UI Kit is a collection of minimalistic and un-opinionated TailwindCSS components for Laravel Blade,
indented to be used with HydePHP. Note that these components may require CSS classes not present in the bundled app.css
-file and that you may need to recompile the CSS file using the included Laravel Mix configuration.
+file and that you may need to recompile the CSS file using the included Tailwind and Vite configuration.
## Screenshot
diff --git a/resources/assets/app.css b/resources/assets/app.css
index dc762b9fd11..42de1227e3f 100644
--- a/resources/assets/app.css
+++ b/resources/assets/app.css
@@ -5,16 +5,14 @@
* The HydeFront package contains some base styles to make your site look even more amazing.
*
* The compiled result of this file is shipped with HydePHP and is found at _media/app.css,
-* so you don't need to compile this file unless you're making changes.
+* so you don't need to compile this file unless you're making changes to Tailwind styles.
*
* If you want, you can load the compiled file with minified styles for a base install from the CDN.
* See https://hydephp.com/docs/1.x/managing-assets#loading-from-cdn
*/
-@import '~hydefront/dist/hyde.css';
+@import 'hydefront/components/torchlight.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
-
-[x-cloak] { display: none !important; }
diff --git a/resources/assets/app.js b/resources/assets/app.js
index 8081ae9a513..79675e67904 100644
--- a/resources/assets/app.js
+++ b/resources/assets/app.js
@@ -1,3 +1,3 @@
/*
-* This is the main JavaScript used by webpack to build the app.js file.
+* This is the main JavaScript used by Vite to build the app.js file.
*/
diff --git a/tailwind.config.js b/tailwind.config.js
index 9171b63559f..9068a370456 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -50,14 +50,18 @@ module.exports = {
content: 'unset',
},
},
- code: {
+ 'code:not(pre code)': {
font: 'unset',
backgroundColor: '#80808033',
paddingLeft: '4px',
paddingRight: '4px',
marginLeft: '-2px',
marginRight: '1px',
- borderRadius: '4px'
+ borderRadius: '4px',
+ maxWidth: '80vw',
+ overflowX: 'auto',
+ verticalAlign: 'top',
+ wordBreak: 'break-all'
},
'code::before': {
content: 'unset',
@@ -66,10 +70,15 @@ module.exports = {
content: 'unset',
},
pre: {
+ backgroundColor: '#292D3E',
+ borderRadius: '0.25rem',
+ marginTop: '1rem',
+ marginBottom: '1rem',
+ overflowX: 'auto',
code: {
fontFamily: "'Fira Code Regular', Consolas, Monospace, 'Courier New'",
- }
- }
+ },
+ },
},
},
invert: {
diff --git a/tests/fixtures/example-sites/ui-examples/documentation.md b/tests/fixtures/example-sites/ui-examples/documentation.md
index 41235c6c585..48b2dd3bc9d 100644
--- a/tests/fixtures/example-sites/ui-examples/documentation.md
+++ b/tests/fixtures/example-sites/ui-examples/documentation.md
@@ -2,7 +2,7 @@
The HydePHP UI Kit is a collection of minimalistic and un-opinionated TailwindCSS components for Laravel Blade,
indented to be used with HydePHP. Note that these components may require CSS classes not present in the bundled app.css
-file and that you may need to recompile the CSS file using the included Laravel Mix configuration.
+file and that you may need to recompile the CSS file using the included Tailwind and Vite configuration.
## Warning
diff --git a/tests/fixtures/markdown-features.md b/tests/fixtures/markdown-features.md
index e8314f56195..1d33e4eaaef 100644
--- a/tests/fixtures/markdown-features.md
+++ b/tests/fixtures/markdown-features.md
@@ -22,7 +22,7 @@ echo 'A file path label has been added to the top right corner.';
#### And syntax highlighting
-
1echo 'Syntax highlighted by torchlight.dev.';
+
1echo 'Syntax highlighted by torchlight.dev.';
---
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000000..b06ea97180d
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,80 @@
+// Using Vite is optional, as the styles you need to get started are already included.
+// However, if you customize existing or add new Tailwind classes, you can use Vite
+// to compile the assets. See https://hydephp.com/docs/1.x/managing-assets.html.
+
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+import fs from 'fs';
+import path from 'path';
+
+const hydeVitePlugin = () => ({
+ name: 'hyde-vite',
+ configureServer(server) {
+ // Create hot file when Vite server starts
+ fs.writeFileSync(path.resolve(process.cwd(), 'app/storage/framework/cache/vite.hot'), '');
+
+ // Remove hot file when Vite server closes
+ ['SIGINT', 'SIGTERM'].forEach(signal => {
+ process.on(signal, () => {
+ fs.rmSync(path.resolve(process.cwd(), 'app/storage/framework/cache/vite.hot'));
+ process.exit();
+ });
+ });
+
+ // Render the Vite index page when the root URL is requested
+ server.middlewares.use((req, res, next) => {
+ if (req.url === '/') {
+ res.end(fs.readFileSync(
+ path.resolve(__dirname, 'vendor/hyde/realtime-compiler/resources/vite-index-page.html'),
+ 'utf-8'
+ ));
+ } else {
+ next();
+ }
+ });
+ }
+});
+
+const hasJavaScriptContent = () => {
+ const appJsPath = resolve(__dirname, 'resources/assets/app.js');
+ if (!fs.existsSync(appJsPath)) return false;
+ const content = fs.readFileSync(appJsPath, 'utf-8');
+ return content.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '').trim().length > 0;
+};
+
+export default defineConfig({
+ server: {
+ port: 5173,
+ hmr: {
+ host: 'localhost',
+ port: 5173,
+ },
+ middlewareMode: false,
+ },
+ plugins: [hydeVitePlugin()],
+ css: {
+ postcss: {
+ plugins: [
+ tailwindcss,
+ autoprefixer
+ ]
+ }
+ },
+ build: {
+ outDir: '_media',
+ emptyOutDir: false,
+ rollupOptions: {
+ input: [
+ ...(hasJavaScriptContent() ? [resolve(__dirname, 'resources/assets/app.js')] : []),
+ resolve(__dirname, 'resources/assets/app.css')
+ ],
+ output: {
+ entryFileNames: '[name].js',
+ chunkFileNames: '[name].js',
+ assetFileNames: '[name].[ext]'
+ }
+ }
+ }
+});
diff --git a/webpack.mix.js b/webpack.mix.js
deleted file mode 100644
index e8d11abbc98..00000000000
--- a/webpack.mix.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// Using Laravel Mix is optional as the styles you need to get started are already included.
-// However, if you add new Tailwind classes, or any customizations, you can use Webpack to
-// compile the assets. See https://hydephp.com/docs/1.x/managing-assets.html.
-
-let mix = require('laravel-mix');
-
-mix.js('resources/assets/app.js', 'app.js')
- .postCss('resources/assets/app.css', 'app.css', [
- require('tailwindcss'),
- require('autoprefixer'),
- ]).setPublicPath('_site/media')
- .copyDirectory('_site/media', '_media')