Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SSR]: Add server side rendering support for Nala components #943

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

fallaciousreasoning
Copy link
Collaborator

@fallaciousreasoning fallaciousreasoning commented Dec 16, 2024

This will allow pages (such as https://brave.com) to use Nala components without needing to load JavaScript. This uses the Declarative Shadow Dom API which hit baseline this year (so is supported in all browsers).

image
^ the above page does not load any scripts at all! The input and button elements work as is and after #942 lands the checkbox will too!

Copy link
Contributor

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://943.pr.nala.bravesoftware.com/
✅ Commit preview: https://943.pr.nala.bravesoftware.com/commit-a850af3e92ac637cda040c981b95f99daf41c63f/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6848 bytes
+ ./tokens/css/variables-browser.css: 6848 bytes
---
- ./tokens/css/variables-ios.old.css: 7033 bytes
+ ./tokens/css/variables-ios.css: 7033 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 2409 bytes
+ ./tokens/css/variables-search.css: 2409 bytes
---
- ./tokens/css/variables-web3.old.css: 905 bytes
+ ./tokens/css/variables-web3.css: 905 bytes
---
- ./tokens/css/variables.old.css: 119898 bytes
+ ./tokens/css/variables.css: 119898 bytes
Variables Diff: variables-android.diff
--- ./tokens/css/variables-android.old.css	2024-12-16 02:48:05.110626623 +0000
+++ ./tokens/css/variables-android.css	2024-12-16 02:47:25.574868141 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 02:47:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-browser.diff
--- ./tokens/css/variables-browser.old.css	2024-12-16 02:48:05.390624927 +0000
+++ ./tokens/css/variables-browser.css	2024-12-16 02:47:25.550868252 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 02:47:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-ios.diff
--- ./tokens/css/variables-ios.old.css	2024-12-16 02:48:05.770622625 +0000
+++ ./tokens/css/variables-ios.css	2024-12-16 02:47:25.590868066 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 02:47:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-marketing.diff
--- ./tokens/css/variables-marketing.old.css	2024-12-16 02:48:06.006621196 +0000
+++ ./tokens/css/variables-marketing.css	2024-12-16 02:47:25.614867954 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 02:47:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-news.diff
--- ./tokens/css/variables-news.old.css	2024-12-16 02:48:06.290619474 +0000
+++ ./tokens/css/variables-news.css	2024-12-16 02:47:25.642867824 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 02:47:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-newtab.diff
--- ./tokens/css/variables-newtab.old.css	2024-12-16 02:48:06.546617927 +0000
+++ ./tokens/css/variables-newtab.css	2024-12-16 02:47:25.650867787 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 02:47:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-search.diff
--- ./tokens/css/variables-search.old.css	2024-12-16 02:48:06.778616519 +0000
+++ ./tokens/css/variables-search.css	2024-12-16 02:47:25.634867862 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 02:47:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-web3.diff
--- ./tokens/css/variables-web3.old.css	2024-12-16 02:48:07.018615065 +0000
+++ ./tokens/css/variables-web3.css	2024-12-16 02:47:25.654867769 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 02:47:25 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables.diff
--- ./tokens/css/variables.old.css	2024-12-16 02:48:07.378612885 +0000
+++ ./tokens/css/variables.css	2024-12-16 02:47:25.386869015 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 02:47:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants