diff --git a/app/app/View/Components/NestedChild.php b/app/app/View/Components/NestedChild.php new file mode 100644 index 0000000..58292c6 --- /dev/null +++ b/app/app/View/Components/NestedChild.php @@ -0,0 +1,26 @@ + const emit = defineEmits(['trigger']) +const count = ref(0) + const trigger = () => { + count.value++ emit('trigger') } - \ No newline at end of file + + +

Times triggered:

\ No newline at end of file diff --git a/app/resources/views/components/nested-child.blade.php b/app/resources/views/components/nested-child.blade.php new file mode 100644 index 0000000..c5908a1 --- /dev/null +++ b/app/resources/views/components/nested-child.blade.php @@ -0,0 +1,3 @@ + + +{{ $slot }} \ No newline at end of file diff --git a/app/resources/views/components/nested-root.blade.php b/app/resources/views/components/nested-root.blade.php new file mode 100644 index 0000000..c5908a1 --- /dev/null +++ b/app/resources/views/components/nested-root.blade.php @@ -0,0 +1,3 @@ + + +{{ $slot }} \ No newline at end of file diff --git a/app/resources/views/emit.blade.php b/app/resources/views/emit.blade.php index 5202196..64e2eba 100644 --- a/app/resources/views/emit.blade.php +++ b/app/resources/views/emit.blade.php @@ -1,12 +1,4 @@ - -

Triggered

diff --git a/app/resources/views/nested.blade.php b/app/resources/views/nested.blade.php new file mode 100644 index 0000000..8f598e1 --- /dev/null +++ b/app/resources/views/nested.blade.php @@ -0,0 +1,21 @@ + + + + + +

Parent - Blade Slot - toggled

+

Parent - Blade Slot - not toggled

+ + +

Nested root - Blade Slot - toggled

+

Nested root - Blade Slot - not toggled

+ + +

Nested child - Blade Slot - toggled

+

Nested child - Blade Slot - not toggled

+
+
+
\ No newline at end of file diff --git a/app/routes/web.php b/app/routes/web.php index 7c550d6..db11689 100644 --- a/app/routes/web.php +++ b/app/routes/web.php @@ -31,6 +31,7 @@ Route::view('/dynamic-component-import', 'dynamic-component-import'); Route::view('/emit', 'emit'); Route::view('/form', 'form'); +Route::view('/nested', 'nested'); Route::view('/props-in-template', 'props-in-template'); Route::view('/refresh', 'refresh')->middleware(Refreshable::class); Route::view('/refresh-state', 'refresh-state')->middleware(Refreshable::class); diff --git a/lib/GenericSpladeComponent.vue b/lib/GenericSpladeComponent.vue index 083f893..276d370 100644 --- a/lib/GenericSpladeComponent.vue +++ b/lib/GenericSpladeComponent.vue @@ -1,5 +1,5 @@ diff --git a/src/BladeViewExtractor.php b/src/BladeViewExtractor.php index e93a92f..cf5ad69 100644 --- a/src/BladeViewExtractor.php +++ b/src/BladeViewExtractor.php @@ -99,6 +99,19 @@ protected function extractWrappedViewInRootLayout(): void ]; } + private function getDataObject(): Collection + { + $importedComponents = $this->getImportedComponents(); + + return Collection::make() + ->merge($this->getBladeProperties()) + ->merge($this->scriptParser->getVariables()->reject(fn ($variable) => $variable === 'props')) + ->merge($this->getBladeFunctions()) + ->when($this->isRefreshable(), fn (Collection $collection) => $collection->push('refreshComponent')) + ->when($this->viewUsesElementRefs(), fn (Collection $collection) => $collection->push('setSpladeRef')) + ->merge($importedComponents['dynamic']); + } + /** * Handle the extraction of the Vue script. Returns the view without the ', - "", + "", ])); $directory = config('splade-core.compiled_scripts'); @@ -148,7 +164,13 @@ public function handle(Filesystem $filesystem): string Process::path(base_path())->run("node_modules/.bin/eslint --fix {$vuePath}"); } - return $this->viewWithoutScriptTag; + $dataObject = $this->getDataObject()->implode(','); + + return << +{$this->viewWithoutScriptTag} + +HTML; } /** @@ -545,7 +567,7 @@ protected function renderSpladeRenderFunction(DefineVueProps $defineVueProps): s {$inheritAttrs} name: "{$this->getTag()}Render", {$componentsObject} - template: spladeTemplates[props.spladeTemplateId], + template: '', data: () => { return { {$dataObject} } }, props: {$definePropsObject}, }; diff --git a/src/DefineVueProps.php b/src/DefineVueProps.php index cefc47b..0378799 100644 --- a/src/DefineVueProps.php +++ b/src/DefineVueProps.php @@ -65,9 +65,9 @@ public function toArray() ]; } - public function toAttributeBag(): ComponentAttributeBag + public function toAttributeBag(array $with = []): ComponentAttributeBag { - $attrs = collect($this->getPropKeys())->mapWithKeys(function (string $prop) { + $attrs = collect($this->getPropKeys())->merge($with)->mapWithKeys(function (string $prop) { $key = Str::kebab($prop); return ['v-bind:'.$key => $prop]; diff --git a/src/RenderViewAsVueComponent.php b/src/RenderViewAsVueComponent.php index 8a15729..d7e28e0 100644 --- a/src/RenderViewAsVueComponent.php +++ b/src/RenderViewAsVueComponent.php @@ -26,7 +26,7 @@ public function render(string $templateId): string { $tag = Str::kebab($this->tag); - $component = "<{$tag} splade-template-id=\"{$templateId}\">"; + $component = "<{$tag}>"; if (empty($this->rootLayoutTags)) { return $component; @@ -34,10 +34,10 @@ public function render(string $templateId): string $rootLayout = Blade::render(<<rootLayoutTags[0]} -###SPLADE-INJECT-HERE### +###SPLADE-INJECT-SLOT-HERE### {$this->rootLayoutTags[1]} HTML); - return str_replace('###SPLADE-INJECT-HERE###', $component, $rootLayout); + return str_replace('###SPLADE-INJECT-SLOT-HERE###', $component, $rootLayout); } } diff --git a/src/ScriptParser.php b/src/ScriptParser.php index b6bb895..d34b737 100644 --- a/src/ScriptParser.php +++ b/src/ScriptParser.php @@ -179,7 +179,10 @@ public function getVariables(Collection|array $additionalItems = []): Collection $variables = Collection::make(); $nodes = Collection::make(); - $add = fn (Identifier $node) => $variables->push($node->getName()) && $nodes->push($node); + $add = function (Identifier $node) use ($variables, $nodes) { + $variables->push($node->getName()); + $nodes->push($node); + }; foreach ($this->rootNode->getBody() as $node) { if ($node instanceof VariableDeclaration) { @@ -187,6 +190,12 @@ public function getVariables(Collection|array $additionalItems = []): Collection $id = $declaration->getId(); if ($id instanceof Identifier) { + if ($id->getName() === 'emit') { + if ($declaration->getInit()->getCallee()->getName() === 'defineEmits') { + continue; + } + } + $add($id); } elseif ($id instanceof ObjectPattern) { foreach ($id->getProperties() as $property) { diff --git a/src/SpladeCoreServiceProvider.php b/src/SpladeCoreServiceProvider.php index 5640d0d..fa3bb63 100644 --- a/src/SpladeCoreServiceProvider.php +++ b/src/SpladeCoreServiceProvider.php @@ -116,7 +116,7 @@ protected function registerBladeCompiler() $app['files'], $app['config']['view.compiled'], $app['config']->get('view.relative_hash', false) ? $app->basePath() : '', - $app['config']->get('view.cache', true), + $app['config']->get('view.cache', false), $app['config']->get('view.compiled_extension', 'php'), ), function (BladeCompiler $blade) { $blade->component('dynamic-component', DynamicComponent::class); diff --git a/src/View/Factory.php b/src/View/Factory.php index 2cb2cd3..0d48c95 100644 --- a/src/View/Factory.php +++ b/src/View/Factory.php @@ -156,6 +156,8 @@ public function renderComponent() // 'response', ]))->toHtml(); + $tag = $spladeBridge['tag']; + collect($spladeBridge['props'])->each(function ($specs, $key) use ($attributes) { if (! str_starts_with($key, 'v-bind:')) { $key = 'v-bind:'.Str::kebab($key); @@ -166,10 +168,19 @@ public function renderComponent() : Js::from($specs->value)->toHtml(); }); + $slotProps = collect($spladeBridge['props']) + ->keys() + ->map(fn ($key) => Str::camel($key)) + ->implode(','); + $attrs = $attributes->toHtml(); + $tag = Str::kebab($tag); + + // dd($spladeBridge); + return static::$trackSpladeComponents - ? "" - : ""; + ? "<{$tag} {$attrs}>{$output}" + : "<{$tag} {$attrs}>{$output}"; } }