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.

Sign up for GitHub

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

perf[react-native]: Memoized Blocks Component to free up UI thread. #3814

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+185 −38
Open

perf[react-native]: Memoized Blocks Component to free up UI thread. #3814

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e264c12
perf(Blocks): Memoized the Blocks Components for freeing the UI thread
Jan 13, 2025
03baae3
fix(test): added condition for checking rn sdk in symbols test case
Jan 13, 2025
315c3a1
Merge branch 'BuilderIO:main' into perf-react-native
yash-builder Jan 20, 2025
81a7a82
fix: merge conflicts
Jan 21, 2025
bb5b126
fix(Block): Memoized block component
Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 65 additions & 34 deletions examples/nextjs-app-dir-v2/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion examples/nextjs-app-dir-v2/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@builder.io/sdk-react": "^1.0.23",
"@builder.io/sdk-react": "^3.0.1",
samijaber marked this conversation as resolved.
Show resolved Hide resolved
"next": "14.1.1",
"react": "^18",
"react-dom": "^18"
Expand Down
15 changes: 15 additions & 0 deletions examples/nextjs-app-dir-v2/src/app/components/MyFunComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
'use client';
import { useState } from 'react';

export const MyFunComponent = (props: { text: string }) => {
const [count, setCount] = useState(0);
return (
<div>
<h3>{props.text.toUpperCase()}</h3>
<p>{count}</p>
<button onClick={() => setCount(prev => prev + 1) }>Click me</button>
</div>
);
};

export default MyFunComponent;
18 changes: 18 additions & 0 deletions examples/nextjs-app-dir-v2/src/app/components/register.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@

'use client';
import dynamic from 'next/dynamic';
import { type RegisteredComponent } from "@builder.io/sdk-react";

export const customComponents: RegisteredComponent[] = [
{
component: dynamic(() => import('./MyFunComponent')),
name: 'MyFunComponent',
inputs: [
{
name: 'text',
type: 'string',
defaultValue: 'Hello world',
},
],
},
];
4 changes: 2 additions & 2 deletions packages/sdks-tests/src/e2e-tests/styles.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ test.describe('Styles', () => {

const FIRST_BLOCK_SELECTOR = checkIsRN(sdk)
? // ScrollView adds an extra div wrapper
`${getClassSelector('builder-blocks', sdk)} > div > div`
`${getClassSelector('builder-blocks', sdk)} > div > div > div > div > div`
: sdk === 'angular'
? `div[builder-id="builder-1098ca09970149b3bc4cd43643bd0545"]`
: `${getClassSelector('builder-blocks', sdk)} > div`;
Expand Down Expand Up @@ -60,7 +60,7 @@ test.describe('Styles', () => {
};

// RN SDK does not use ScrollView in Symbol
const FIRST_BLOCK_SYMBOL_SELECTOR = `${getClassSelector('builder-blocks', sdk)} > div`;
const FIRST_BLOCK_SYMBOL_SELECTOR = checkIsRN(sdk) ? `${getClassSelector('builder-blocks', sdk)} > div > div > div` : `${getClassSelector('builder-blocks', sdk)} > div`;

const locator = page
.locator(FIRST_BLOCK_SYMBOL_SELECTOR)
Expand Down
Loading
Loading