Adding UX React, Svelte, Vue recipes #1213

weaverryan · 2023-06-07T17:55:18Z

Q	A
License	MIT
Doc issue/PR	None

Some manual things don't need to be manual anymore.

…alled

github-actions · 2023-06-07T17:55:47Z

Thanks for the PR 😍

How to test these changes in your application

Define the SYMFONY_ENDPOINT environment variable:

# On Unix-like (BSD, Linux and macOS)
export SYMFONY_ENDPOINT=https://raw.githubusercontent.com/symfony/recipes/flex/pull-1213/index.json
# On Windows
SET SYMFONY_ENDPOINT=https://raw.githubusercontent.com/symfony/recipes/flex/pull-1213/index.json

Install the package(s) related to this recipe:

composer req 'symfony/flex:^1.16'
composer req 'symfony/ux-react:^2.9' 'symfony/ux-svelte:^2.9' 'symfony/ux-vue:^2.9'

Don't forget to unset the SYMFONY_ENDPOINT environment variable when done:

# On Unix-like (BSD, Linux and macOS)
unset SYMFONY_ENDPOINT
# On Windows
SET SYMFONY_ENDPOINT=

Diff between recipe versions

In order to help with the review stage, I'm in charge of computing the diff between the various versions of patched recipes.
I'm going keep this comment up to date with any updates of the attached patch.

symfony/ux-react

2.8 vs 2.9

diff --git a/symfony/ux-react/2.9/assets/react/controllers/Hello.jsx b/symfony/ux-react/2.9/assets/react/controllers/Hello.jsx
new file mode 100644
index 0000000..54fe368
--- /dev/null
+++ b/symfony/ux-react/2.9/assets/react/controllers/Hello.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function (props) {
+    return <div>Hello {props.fullName}</div>;
+}
diff --git a/symfony/ux-react/2.8/manifest.json b/symfony/ux-react/2.9/manifest.json
index be0ff74..444d845 100644
--- a/symfony/ux-react/2.8/manifest.json
+++ b/symfony/ux-react/2.9/manifest.json
@@ -1,5 +1,40 @@
 {
     "bundles": {
         "Symfony\\UX\\React\\ReactBundle": ["all"]
-    }
+    },
+    "copy-from-recipe": {
+        "assets/": "assets/"
+    },
+    "conflict": {
+        "symfony/webpack-encore-bundle": "<2.0",
+        "symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0"
+    },
+    "add-lines": [
+        {
+            "file": "webpack.config.js",
+            "content": "\n    .enableReactPreset()",
+            "position": "after_target",
+            "target": ".splitEntryChunks()"
+        },
+        {
+            "file": "assets/app.js",
+            "content": "import { registerReactControllerComponents } from '@symfony/ux-react';",
+            "position": "top",
+            "warn_if_missing": true
+        },
+        {
+            "file": "assets/app.js",
+            "content": "registerReactControllerComponents(require.context('./react/controllers', true, /\\.(j|t)sx?$/));",
+            "position": "bottom",
+            "warn_if_missing": true,
+            "requires": "symfony/webpack-encore-bundle"
+        },
+        {
+            "file": "assets/app.js",
+            "content": "registerReactControllerComponents();",
+            "position": "bottom",
+            "warn_if_missing": true,
+            "requires": "symfony/asset-mapper"
+        }
+    ]
 }

symfony/ux-svelte

2.8 vs 2.9

diff --git a/symfony/ux-svelte/2.9/assets/svelte/controllers/Hello.svelte b/symfony/ux-svelte/2.9/assets/svelte/controllers/Hello.svelte
new file mode 100644
index 0000000..3499af4
--- /dev/null
+++ b/symfony/ux-svelte/2.9/assets/svelte/controllers/Hello.svelte
@@ -0,0 +1,5 @@
+<script>
+    export let name = "Svelte";
+</script>
+
+<div>Hello {name}</div>
diff --git a/symfony/ux-svelte/2.8/manifest.json b/symfony/ux-svelte/2.9/manifest.json
index 7c82371..c5e3457 100644
--- a/symfony/ux-svelte/2.8/manifest.json
+++ b/symfony/ux-svelte/2.9/manifest.json
@@ -1,5 +1,40 @@
 {
     "bundles": {
         "Symfony\\UX\\Svelte\\SvelteBundle": ["all"]
-    }
+    },
+    "copy-from-recipe": {
+        "assets/": "assets/"
+    },
+    "conflict": {
+        "symfony/webpack-encore-bundle": "<2.0",
+        "symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0"
+    },
+    "add-lines": [
+        {
+            "file": "webpack.config.js",
+            "content": "\n    .enableSvelte()",
+            "position": "after_target",
+            "target": ".splitEntryChunks()"
+        },
+        {
+            "file": "assets/app.js",
+            "content": "import { registerSvelteControllerComponents } from '@symfony/ux-svelte';",
+            "position": "top",
+            "warn_if_missing": true
+        },
+        {
+            "file": "assets/app.js",
+            "content": "registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\\.svelte$/));",
+            "position": "bottom",
+            "warn_if_missing": true,
+            "requires": "symfony/webpack-encore-bundle"
+        },
+        {
+            "file": "assets/app.js",
+            "content": "registerSvelteControllerComponents();",
+            "position": "bottom",
+            "warn_if_missing": true,
+            "requires": "symfony/asset-mapper"
+        }
+    ]
 }

symfony/ux-vue

2.8 vs 2.9

diff --git a/symfony/ux-vue/2.9/assets/vue/controllers/Hello.vue b/symfony/ux-vue/2.9/assets/vue/controllers/Hello.vue
new file mode 100644
index 0000000..2812aa4
--- /dev/null
+++ b/symfony/ux-vue/2.9/assets/vue/controllers/Hello.vue
@@ -0,0 +1,9 @@
+<template>
+    <div>Hello {{ name }}!</div>
+</template>
+
+<script setup>
+    defineProps({
+        name: String
+    });
+</script>
diff --git a/symfony/ux-vue/2.8/manifest.json b/symfony/ux-vue/2.9/manifest.json
index 9010c6f..2682a62 100644
--- a/symfony/ux-vue/2.8/manifest.json
+++ b/symfony/ux-vue/2.9/manifest.json
@@ -1,5 +1,40 @@
 {
     "bundles": {
         "Symfony\\UX\\Vue\\VueBundle": ["all"]
-    }
+    },
+    "copy-from-recipe": {
+        "assets/": "assets/"
+    },
+    "conflict": {
+        "symfony/webpack-encore-bundle": "<2.0",
+        "symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0"
+    },
+    "add-lines": [
+        {
+            "file": "webpack.config.js",
+            "content": "\n    .enableVueLoader()",
+            "position": "after_target",
+            "target": ".splitEntryChunks()"
+        },
+        {
+            "file": "assets/app.js",
+            "content": "import { registerVueControllerComponents } from '@symfony/ux-vue';",
+            "position": "top",
+            "warn_if_missing": true
+        },
+        {
+            "file": "assets/app.js",
+            "content": "registerVueControllerComponents(require.context('./vue/controllers', true, /\\.vue$/));",
+            "position": "bottom",
+            "warn_if_missing": true,
+            "requires": "symfony/webpack-encore-bundle"
+        },
+        {
+            "file": "assets/app.js",
+            "content": "registerVueControllerComponents();",
+            "position": "bottom",
+            "warn_if_missing": true,
+            "requires": "symfony/asset-mapper"
+        }
+    ]
 }

weaverryan · 2023-06-09T00:47:51Z

This is ready for review!

weaverryan · 2023-06-13T16:55:19Z

Post-merge, I'll simplify the docs for the affected UX packages.

symfony/recipes#1213

This PR was squashed before being merged into the 2.x branch. Discussion ---------- Updating documentation for newly merged recipes | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Tickets | None | License | MIT See symfony/recipes#1213 Commits ------- cf6a9bd Updating documentation for newly merged recipes

weaverryan added 3 commits June 7, 2023 13:53

Adding a UX React recipe

771d16e

removing copied file

150001d

Adding 2.8 recipe so that if there is a conflict, at least IT is inst…

c3d89ce

…alled

Adding svelte and vue

cd61c40

weaverryan marked this pull request as ready for review June 7, 2023 19:28

weaverryan changed the title ~~[WIP] Adding UX React, Svelte, Vue recipes~~ Adding UX React, Svelte, Vue recipes Jun 7, 2023

Adding example components to each

8024718

symfony-recipes-bot enabled auto-merge (squash) June 7, 2023 19:48

renaming bad directories

ed822fe

fabpot approved these changes Jun 15, 2023

View reviewed changes

fabpot disabled auto-merge June 21, 2023 06:32

fabpot merged commit 0235b31 into symfony:main Jun 21, 2023

weaverryan deleted the react-vue-svelte-recipes branch June 21, 2023 13:27

weaverryan added a commit to weaverryan/ux that referenced this pull request Jun 26, 2023

Updating documenation for newly merged recipes

7c14a1b

symfony/recipes#1213

weaverryan mentioned this pull request Jun 26, 2023

Updating documentation for newly merged recipes symfony/ux#971

Merged

weaverryan added a commit to weaverryan/ux that referenced this pull request Jun 28, 2023

Updating documenation for newly merged recipes

0d34a33

symfony/recipes#1213

weaverryan mentioned this pull request Oct 11, 2023

The "lazyness" of symfony/ux-react isn't true? Why my React imports are loaded for every request? symfony/ux#1177

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Adding UX React, Svelte, Vue recipes #1213

Adding UX React, Svelte, Vue recipes #1213

Uh oh!

weaverryan commented Jun 7, 2023

Uh oh!

github-actions bot commented Jun 7, 2023 •

edited

Loading

Uh oh!

weaverryan commented Jun 9, 2023

Uh oh!

weaverryan commented Jun 13, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Adding UX React, Svelte, Vue recipes #1213

Adding UX React, Svelte, Vue recipes #1213

Uh oh!

Conversation

weaverryan commented Jun 7, 2023

Uh oh!

github-actions bot commented Jun 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to test these changes in your application

Diff between recipe versions

symfony/ux-react

symfony/ux-svelte

symfony/ux-vue

Uh oh!

weaverryan commented Jun 9, 2023

Uh oh!

weaverryan commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jun 7, 2023 •

edited

Loading

weaverryan commented Jun 13, 2023 •

edited

Loading