Prevent any protonemedia imports from generated Vue components

protonemedia · Jan 30, 2024 · 648304a · 648304a
1 parent f4787e4
commit 648304a
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 45 deletions.
diff --git a/app/package.json b/app/package.json
@@ -7,7 +7,7 @@
     },
     "devDependencies": {
         "@headlessui/vue": "^1.7.17",
-        "@protonemedia/laravel-splade-core": "file:../protonemedia-laravel-splade-core-3.0.0.tgz",
+        "@protonemedia/laravel-splade-core": "file:../protonemedia-laravel-splade-core-4.0.0.tgz",
         "@protonemedia/laravel-splade-vite": "^1.0.3",
         "@vitejs/plugin-vue": "^4.3.4",
         "axios": "^1.1.2",

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__2.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__2.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { BladeComponent } from '@protonemedia/laravel-splade-core'
-import { ref } from 'vue'
+import { inject, ref } from 'vue'
 const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
+const _spladeBladeHelpers = inject('$spladeBladeHelpers')
 const _spladeBridgeState = ref(props.spladeBridge)
-const execute = BladeComponent.asyncComponentMethod('execute', _spladeBridgeState)
-const sleep = BladeComponent.asyncComponentMethod('sleep', _spladeBridgeState)
+const execute = _spladeBladeHelpers.asyncComponentMethod('execute', _spladeBridgeState)
+const sleep = _spladeBladeHelpers.asyncComponentMethod('sleep', _spladeBridgeState)
 const response = ref('-')
 
 const executeWithCallback = () => {

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__3.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__3.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { BladeComponent } from '@protonemedia/laravel-splade-core'
-import { ref } from 'vue'
+import { inject, ref } from 'vue'
 const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
+const _spladeBladeHelpers = inject('$spladeBladeHelpers')
 const _spladeBridgeState = ref(props.spladeBridge)
-const execute = BladeComponent.asyncComponentMethod('execute', _spladeBridgeState)
-const fail = BladeComponent.asyncComponentMethod('fail', _spladeBridgeState)
+const execute = _spladeBladeHelpers.asyncComponentMethod('execute', _spladeBridgeState)
+const fail = _spladeBladeHelpers.asyncComponentMethod('fail', _spladeBridgeState)
 const response = ref('-')
 
 execute.before((data) => {

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__4.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__4.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { BladeComponent } from '@protonemedia/laravel-splade-core'
-import { computed, ref } from 'vue'
+import { computed, inject, ref } from 'vue'
 const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
+const _spladeBladeHelpers = inject('$spladeBladeHelpers')
 const _spladeBridgeState = ref(props.spladeBridge)
-const setMessage = BladeComponent.asyncComponentMethod('setMessage', _spladeBridgeState)
+const setMessage = _spladeBladeHelpers.asyncComponentMethod('setMessage', _spladeBridgeState)
 const message = computed({
     get() {
         return _spladeBridgeState.value.data.message

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__7.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__7.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { BladeComponent } from '@protonemedia/laravel-splade-core'
 import { inject, ref } from 'vue'
 const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
+const _spladeBladeHelpers = inject('$spladeBladeHelpers')
 const _spladeBridgeState = ref(props.spladeBridge)
 const _spladeTemplateBus = inject('$spladeTemplateBus')
-const refreshComponent = BladeComponent.asyncRefreshComponent(_spladeBridgeState, _spladeTemplateBus)
+const refreshComponent = _spladeBladeHelpers.asyncRefreshComponent(_spladeBridgeState, _spladeTemplateBus)
 const spladeRender = {
     inheritAttrs: false,
     name: 'SpladeComponentTimeRender',

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__8.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__8.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { BladeComponent } from '@protonemedia/laravel-splade-core'
 import { inject, ref } from 'vue'
 const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
+const _spladeBladeHelpers = inject('$spladeBladeHelpers')
 const _spladeBridgeState = ref(props.spladeBridge)
 const _spladeTemplateBus = inject('$spladeTemplateBus')
-const refreshComponent = BladeComponent.asyncRefreshComponent(_spladeBridgeState, _spladeTemplateBus)
+const refreshComponent = _spladeBladeHelpers.asyncRefreshComponent(_spladeBridgeState, _spladeTemplateBus)
 const status = ref('idle')
 
 refreshComponent.before(() => {

diff --git a/lib/SpladeCorePlugin.js b/lib/SpladeCorePlugin.js
@@ -1,3 +1,4 @@
+import BladeHelpers from "./BladeHelpers.js";
 import GenericSpladeComponent from "./GenericSpladeComponent.vue";
 
 class EventBus {
@@ -35,6 +36,7 @@ class EventBus {
 
 export default {
     install: (app, options) => {
+        app.provide("$spladeBladeHelpers", BladeHelpers);
         app.provide("$spladeTemplateBus", new EventBus("splade-templates"));
         app.component("GenericSpladeComponent", GenericSpladeComponent);
 

diff --git a/lib/main.js b/lib/main.js
@@ -1,5 +1,3 @@
-import BladeComponent from "./BladeHelpers.js";
-import GenericSpladeComponent from "./GenericSpladeComponent.vue";
 import SpladeCorePlugin from "./SpladeCorePlugin.js";
 
-export { BladeComponent, GenericSpladeComponent, SpladeCorePlugin };
+export { SpladeCorePlugin };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@protonemedia/laravel-splade-core",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Splade Core: Use <script setup> and all of Vue 3's magic in your Laravel Blade.",
   "private": false,
   "author": "Pascal Baljet <[email protected]>",
@@ -27,7 +27,7 @@
   },
   "peerDependencies": {
     "axios": "^1.1.2",
-    "vue": "^3.3.4"
+    "vue": "^3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.3.4",

diff --git a/src/BladeViewExtractor.php b/src/BladeViewExtractor.php
@@ -129,7 +129,7 @@ public function handle(Filesystem $filesystem): string
             '<script setup>',
             $this->renderImports(),
             $defineVueProps->generatePropsDeclaration(),
-            $this->renderSpladeBridgeState(),
+            $this->renderSpladeBridge(),
             $this->renderBladeFunctionsAsJavascriptFunctions(),
             $this->renderBladePropertiesAsComputedVueProperties(),
             $this->renderJavascriptFunctionToRefreshComponent(),
@@ -358,45 +358,29 @@ protected function renderImports(): string
     {
         $vueFunctionsImports = $this->scriptParser->getVueFunctions()
             ->when($this->getImportedComponents()['dynamic']->isNotEmpty(), fn ($collection) => $collection->push('markRaw'))
-            ->when($this->needsSpladeBridge(), fn ($collection) => $collection->push('ref'))
+            ->when($this->needsSpladeBridge(), fn ($collection) => $collection->push('inject')->push('ref'))
             ->when($this->isRefreshable(), fn ($collection) => $collection->push('inject'))
             ->when($this->isComponent() && ! empty($this->getBladeProperties()), fn ($collection) => $collection->push('computed'))
             ->unique()
             ->sort()
             ->implode(',');
 
-        $spladeCoreImports = match (true) {
-            $this->needsSpladeBridge() => 'BladeComponent',
-            default => '',
-        };
-
-        if (! $spladeCoreImports) {
-            return <<<JS
-import { {$vueFunctionsImports} } from 'vue';
-JS;
-        }
-
-        $dev = false;
-
-        return $dev ? <<<JS
-import { {$spladeCoreImports} } from '../../../../dist/protone-media-laravel-splade-core'
-import { {$vueFunctionsImports} } from 'vue';
-JS : <<<JS
-import { {$spladeCoreImports} } from '@protonemedia/laravel-splade-core'
+        return <<<JS
 import { {$vueFunctionsImports} } from 'vue';
 JS;
     }
 
     /**
      * Renders the state for the SpladeBridge.
      */
-    protected function renderSpladeBridgeState(): string
+    protected function renderSpladeBridge(): string
     {
         if (! $this->needsSpladeBridge()) {
             return '';
         }
 
         return <<<'JS'
+const _spladeBladeHelpers = inject("$spladeBladeHelpers");
 const _spladeBridgeState = ref(props.spladeBridge);
 JS;
     }
@@ -410,7 +394,7 @@ protected function renderBladeFunctionsAsJavascriptFunctions(): string
 
         foreach ($this->getBladeFunctions() as $function) {
             $lines[] = <<<JS
-const {$function} = BladeComponent.asyncComponentMethod('{$function}', _spladeBridgeState);
+const {$function} = _spladeBladeHelpers.asyncComponentMethod('{$function}', _spladeBridgeState);
 JS;
         }
 
@@ -455,7 +439,7 @@ protected function renderJavascriptFunctionToRefreshComponent(): string
 
         return <<<'JS'
 const _spladeTemplateBus = inject("$spladeTemplateBus");
-const refreshComponent = BladeComponent.asyncRefreshComponent(_spladeBridgeState, _spladeTemplateBus);
+const refreshComponent = _spladeBladeHelpers.asyncRefreshComponent(_spladeBridgeState, _spladeTemplateBus);
 JS;
     }
 

diff --git a/src/Commands/InstallNewApp.php b/src/Commands/InstallNewApp.php
@@ -24,7 +24,7 @@ public function handle(Filesystem $filesystem): int
 
         $this->updateNodePackages(function (array $packages) {
             return [
-                '@protonemedia/laravel-splade-core' => '^3.0.0',
+                '@protonemedia/laravel-splade-core' => '^4.0.0',
                 '@protonemedia/laravel-splade-vite' => '^2.0.0',
                 '@vitejs/plugin-vue' => '^4.4.0',
                 'axios' => '^1.1.2',