@epam/ai-dial-modulify-ui 0.23.0-rc.9 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -0
- package/index.esm.js +2464 -1
- package/package.json +1 -1
- package/src/index.d.ts +2 -0
- package/src/lib/ComponentBuilder.d.ts +2 -0
- package/src/lib/Inversify.d.ts +1 -0
- package/src/lib/utils/appWithJss.d.ts +2 -0
- package/src/lib/utils/documentWithJss.d.ts +7 -0
package/README.md
CHANGED
|
@@ -332,6 +332,63 @@ This combined approach not only allows you to leverage Inversify's implementatio
|
|
|
332
332
|
|
|
333
333
|
This combined approach enables you to use Inversify's implementation swapping features along with the structured customization options provided by ComponentBuilder. Additionally, it emphasizes how Inversify can be employed for implicit, application-wide modifications of components.
|
|
334
334
|
|
|
335
|
+
### JSS Integration Utilities for Next.js
|
|
336
|
+
|
|
337
|
+
These utility functions designed for integrating JSS (JavaScript Style Sheets) with a Next.js application, enabling efficient server-side rendering (SSR) of styles.
|
|
338
|
+
|
|
339
|
+
#### `documentWithJss`
|
|
340
|
+
|
|
341
|
+
This utility is designed to enhance Next.js's custom `_document` component, allowing for the collection and server-side rendering of styles using JSS.
|
|
342
|
+
The utility modifies the server-rendering process to include JSS styles in the initial HTML response. It collects all styles in a `SheetsRegistry` and injects them into the server-rendered HTML via a `<style>` tag, preventing any flash of unstyled content (FOUC).
|
|
343
|
+
|
|
344
|
+
#### Example
|
|
345
|
+
|
|
346
|
+
To use `documentWithJss`, wrap your custom `_document` component with this function:
|
|
347
|
+
|
|
348
|
+
```tsx
|
|
349
|
+
// pages/_document.tsx
|
|
350
|
+
import { documentWithJss } from '../path/to/utils';
|
|
351
|
+
|
|
352
|
+
import Document, { Head, Html, Main, NextScript } from 'next/document';
|
|
353
|
+
|
|
354
|
+
class MyDocument extends Document {
|
|
355
|
+
render() {
|
|
356
|
+
return (
|
|
357
|
+
<Html>
|
|
358
|
+
<Head />
|
|
359
|
+
<body>
|
|
360
|
+
<Main />
|
|
361
|
+
<NextScript />
|
|
362
|
+
</body>
|
|
363
|
+
</Html>
|
|
364
|
+
);
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
export default documentWithJss(MyDocument);
|
|
369
|
+
```
|
|
370
|
+
|
|
371
|
+
#### `appWithJss`
|
|
372
|
+
|
|
373
|
+
This utility is a Higher-Order Component (HOC) meant to wrap Next.js's custom `_app` component. It ensures that server-side rendered styles are removed from the DOM once the app is hydrated on the client-side, which helps avoid style duplication.
|
|
374
|
+
|
|
375
|
+
#### Example
|
|
376
|
+
|
|
377
|
+
To use `appWithJss`, wrap your custom `_app` component:
|
|
378
|
+
|
|
379
|
+
```tsx
|
|
380
|
+
// pages/_app.tsx
|
|
381
|
+
import { appWithJss } from '../path/to/utils';
|
|
382
|
+
|
|
383
|
+
import { AppProps } from 'next/app';
|
|
384
|
+
|
|
385
|
+
function MyApp({ Component, pageProps }: AppProps) {
|
|
386
|
+
return <Component {...pageProps} />;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
export default appWithJss(MyApp);
|
|
390
|
+
```
|
|
391
|
+
|
|
335
392
|
### Conclusion
|
|
336
393
|
|
|
337
394
|
In conclusion, **Inversify** and **ComponentBuilder** offer powerful mechanisms to enhance the flexibility, maintainability, and customization potential of your React components. By providing tools to manage implementations, structure component logic, and simplify complex customizations, these libraries streamline the development process and promote code clarity, ultimately leading to more robust and adaptable React applications.
|