v2 initial commit

README.md

@@ -22,7 +22,7 @@ Codeigniter vite is a package that aims to integrate [vitejs](https://vitejs.dev
  - ⏱️ Almost zero configuration
  - 🧩 Easy to install and remove
  - 🔨 Easy to customize
- - ✌️ Support most used frameworks: `react`, `vue`, and `svlete`
+ - ✌️ Support most used frameworks: `react`, `vue`, `svlete` and **`SvelteKit`** 🎉
  - 🔥 Enjoy hot module replacement (HMR)
 
 ## Installation:

src/Commands/Init.php

@@ -9,7 +9,7 @@
 
 class Init extends BaseCommand
 {
-    protected $group        = 'Codeigniter Vite';
+    protected $group        = 'CodeIgniter Vite';
     protected $name         = 'vite:init';
     protected $description  = 'Initialize codeigniter vite package';
 
@@ -18,6 +18,7 @@ class Init extends BaseCommand
      */
     private string $framework;
 
+    private array $supportedFrameworks = ['none', 'react', 'vue', 'svelte', 'sveltekit'];
 
     /**
      *  Module path
@@ -34,24 +35,24 @@ public function __construct()
     public function run(array $params)
     {
         # Module start.
-        CLI::write('Initializing Codeigniter Vite 🔥⚡', 'white', 'cyan');
+        CLI::write('Initializing Codeigniter Vite Package 🔥⚡', 'white', 'cyan');
         CLI::newLine();
 
         # Set framework.
-        $this->framework = $params['framework'] ?? CLI::prompt('Choose a framework: ', ['none', 'vue', 'react', 'svelte']);
+        $this->framework = $params['framework'] ?? CLI::prompt('Choose a framework: ', $this->supportedFrameworks);
         CLI::newLine();
 
-        # First, what if user select a none supported framework ?!
+        # But, what if user select a none supported framework ?!
         # if that's true, return an error message with available frameworks.
-        if (!in_array($this->framework, ['none', 'vue', 'react', 'svelte']))
+        if (!in_array($this->framework, $this->supportedFrameworks))
         {
             CLI::error("❌ Sorry, but $this->framework is not supported!");
-            CLI::error('Available frameworks are: ' . CLI::color('vue, react and svelte', 'green'));
+            CLI::error('Available frameworks are: ' . CLI::color(implode(', ', $this->supportedFrameworks), 'green'));
             CLI::newLine();
             return;
         }
 
-        # Now let's generate vite necesary files (vite.config.js, package.json & resources direction).
+        # Now let's generate vite necesary files (vite.config.js, package.json ...etc).
         $this->generateFrameworkFiles();
 
         # Update .env file.
@@ -65,31 +66,28 @@ public function run(array $params)
     }
 
     /**
-     * Generate vite files (vite.config.js, package.json & resources)
+     * Generate vite files (vite.config.js, package.json & resources ...etc)
      * 
      * @return void
      */
     private function generateFrameworkFiles()
     {
+        helper('filesystem');
+
         CLI::write('⚡ Generating vite files...', 'yellow');
         CLI::newLine();
 
         # Framework files.
-        $paths = ['vite.config.js', 'package.json', 'resources'];
+        $frameworkPath = ($this->framework === 'none') ? 'frameworks/default' : "frameworks/$this->framework";
 
-        if ($this->framework === 'none')
-        {
-            $publisher = new Publisher($this->path . 'Config/default', ROOTPATH);
-        }
-        else
-        {
-            $publisher = new Publisher($this->path . "Config/$this->framework", ROOTPATH);
-        }
+        $frameworkFiles = directory_map($this->path . $frameworkPath, 1, true);
+
+        $publisher = new Publisher($this->path . "$frameworkPath", ROOTPATH);
 
         # Publish them.
         try
         {
-            $publisher->addPaths($paths)->merge(true);
+            $publisher->addPaths($frameworkFiles)->merge(true);
         }
         catch (Throwable $e)
         {
@@ -159,6 +157,14 @@ private function updateEnvFile()
                 $updates = str_replace("VITE_ENTRY_FILE='main.js'", "VITE_ENTRY_FILE='main.jsx'", $envContent);
                 file_put_contents($envFile, $updates);
             }
+
+            # SvelteKit src directory.
+            if ($this->framework === 'sveltekit')
+            {
+                $envContent = file_get_contents($envFile);
+                $updates = str_replace("VITE_RESOURCES_DIR='resources'", "VITE_RESOURCES_DIR='src'", $envContent);
+                file_put_contents($envFile, $updates);
+            }
         }
 
         # env updated.

src/Commands/Remove.php

@@ -9,17 +9,27 @@
 
 class Remove extends BaseCommand
 {
-    protected $group        = 'Codeigniter Vite';
+    protected $group        = 'CodeIgniter Vite';
     protected $name         = 'vite:remove';
     protected $description  = 'Remove codeigniter vite generated files and settings';
 
+    /**
+     *  Module path
+     */
+    private string $path;
+
+    public function __construct()
+    {
+        $this->path = service('autoloader')->getNamespace('Mihatori\\CodeigniterVite')[0];
+    }
+
     public function run(array $params)
     {
         # cleaning start.
         CLI::write('Removing Codeigniter Vite 🔥⚡', 'white', 'red');
         CLI::newLine();
 
-        # Now let's remove vite files (vite.config.js, package.json & resources direction).
+        # Now let's remove vite files (vite.config.js, package.json ...etc).
         $this->removeFrameworkFiles();
 
         # Reset .env file.
@@ -31,29 +41,45 @@ public function run(array $params)
     }
 
     /**
-     * Remove vite files (vite.config.js, package.json & resources)
+     * Remove vite files (vite.config.js, package.json ...etc).
      * 
      * @return void
      */
     private function removeFrameworkFiles()
     {
+        helper('filesystem');
+
         CLI::write('Removing vite files...', 'yellow');
         CLI::newLine();
 
-        # First vite.config.js
-        is_file(ROOTPATH . 'vite.config.js') ? unlink(ROOTPATH . 'vite.config.js') : CLI::error('vite.config.js does not exist');
+        $framework = env('VITE_FRAMEWORK') ?? 'default';
+
+        $frameworkFiles = directory_map($this->path . "frameworks/$framework", 1, true);
 
-        # package.json
-        is_file(ROOTPATH . 'package.json') ? unlink(ROOTPATH . 'package.json') : CLI::error('package.json does not exist');
+        foreach ($frameworkFiles as $file)
+        {
+            # Remove resources|src dir.
+            if (is_file(ROOTPATH . $file))
+            {
+                unlink(ROOTPATH . $file);
+            }
+            elseif (is_dir(ROOTPATH . $file))
+            {
+                (new Publisher(null, ROOTPATH . $file))->wipe();
+            }
+            else
+            {
+                CLI::error("$file does not exist");
+            }
+        }
 
         # Remove package-lock.json
         is_file(ROOTPATH . 'package-lock.json') ? unlink(ROOTPATH . 'package-lock.json') : CLI::error('package-lock.json does not exist');
 
-        # Empty resources dir.
-        if (is_dir(ROOTPATH . 'resources'))
+        # Just in case user has changed the resources directory.
+        if (env('VITE_RESOURCES_DIR') && is_dir(ROOTPATH . env('VITE_RESOURCES_DIR')))
         {
-            $publisher = new Publisher(null, ROOTPATH . 'resources');
-            $publisher->wipe();
+            (new Publisher(null, ROOTPATH . env('VITE_RESOURCES_DIR')))->wipe();
         }
     }
 

src/Decorator.php

@@ -21,13 +21,13 @@ public static function decorate(string $html): string
             # Close the div
             $html = str_replace('</body>', "\n\t</div>\n</body>", $html);
 
-            # Get generated css.
+            # Get bundled assets.
             $tags = Vite::tags();
 
             $jsTags  = $tags['js'];
 
             # now inject css
-            if (!empty($tags['css']))
+            if (!empty($tags['css']) && env('VITE_FRAMEWORK') !== 'sveltekit')
             {
                 $cssTags = $tags['css'];
 

src/Vite.php

@@ -48,9 +48,29 @@ public static function tags(): ?array
                 $fileExtension = substr($file->file, -3, 3);
 
                 # Generate js tag.
-                if ($fileExtension === '.js' && isset($file->isEntry) && $file->isEntry === true)
+                if ($fileExtension === '.js' && isset($file->isEntry) && $file->isEntry === true && (!isset($file->isDynamicEntry) || $file->isDynamicEntry !== true))
                 {
-                    $result['js'] .= '<script type="module" src="/' . $file->file . '"></script>';
+                    # SvelteKit requires this small module.
+                    if (env('VITE_FRAMEWORK') == 'sveltekit')
+                    {
+                        $result['js'] = "
+                            <script type='module'>
+                                import { start } from '/" . $file->file . "';
+                                start({
+                                    target: document.querySelector('#app'),
+                                    paths: {
+                                        base: '',
+                                        assets: ''
+                                    },
+                                    route: true,
+                                    spa: true,
+                                })
+                            </script>";
+                    }
+                    else
+                    {
+                        $result['js'] .= '<script type="module" src="/' . $file->file . '"></script>';
+                    }
                 }
 
                 if (!empty($file->css))
@@ -69,7 +89,7 @@ public static function tags(): ?array
     /**
      * Enable HMR for react.
      * 
-     * @see https://v2.vitejs.dev/guide/backend-integration.html
+     * @see https://vitejs.dev/guide/backend-integration.html
      * 
      * @return string|null a simple module script
      */

src/frameworks/sveltekit/jsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+}

src/frameworks/sveltekit/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "codeigniter-sveltekit",
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"package": "svelte-kit package"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/kit": "next",
+		"@types/cookie": "^0.5.1",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"svelte": "^3.46.0",
+		"svelte-check": "^2.7.1",
+		"typescript": "^4.7.4",
+		"vite": "^3.0.0"
+	},
+	"dependencies": {
+		"@sveltejs/adapter-static": "^1.0.0-next.38"
+	}
+}

src/frameworks/sveltekit/src/app.css

@@ -0,0 +1,53 @@
+:root {
+	font-family: Helvetica,
+		Arial,
+		sans-serif;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 400;
+	color-scheme: light
+		dark;
+	color: rgba(
+		255,
+		255,
+		255,
+		0.87
+	);
+	background-color: #242424;
+	text-rendering: optimizeLegibility;
+}
+
+body {
+	margin: 0;
+	display: flex;
+	place-items: center;
+	min-width: 320px;
+	min-height: 100vh;
+}
+
+#app {
+	max-width: 1280px;
+	margin: 0
+		auto;
+	padding: 2rem;
+	text-align: center;
+}
+
+.logo {
+	height: 6em;
+	margin-inline: 10px;
+}
+
+button {
+	padding: 10px
+		15px;
+	border: 1px
+		solid
+		#6f6f6f;
+	border-radius: 11px;
+	cursor: pointer;
+}
+
+p {
+	margin-block: 25px;
+}

src/frameworks/sveltekit/src/app.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width" />
+	%sveltekit.head%
+</head>
+
+<body>
+	<div style="text-align:center;display:grid;justify-content:center;align-items:center;margin: 0 auto;">
+		<div>
+			<h2>SveltKit is running</h2>
+			please access your project through your php server.
+		</div>
+	</div>
+	<template>
+		%sveltekit.body%
+	</template>
+</body>
+
+</html>