+
+> [JSS](https://cssinjs.org/) integration with Angular
+
+[](https://npmjs.org/package/@design4pro/angular-jss)
+[](https://github.com/design4pro/angular-jss/jss/blob/master/LICENSE.md)
+[](https://npmjs.org/package/@design4pro/angular-jss)
+[](https://npmjs.org/package/@design4pro/angular-jss)
+[](https://github.com/design4pro/)
+
+## Features
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+
+## Installation
+
+Using `npm`:
+
+```sh
+npm install @design4pro/angular-jss
+```
+
+or using `yarn`:
+
+```sh
+yarn add @design4pro/angular-jss
+```
+
+## Usage
+
+Inject the `AngularJssModule` module into your root module:
+
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AngularJssModule } from '@design4pro/angular-jss';
+import { AppComponent } from './app.component';
+
+@NgModule({
+ declarations: [AppComponent],
+ imports: [BrowserModule, AngularJssModule.forRoot()],
+ providers: [],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+Use class decorator `Styled` to add styles to your component:
+
+```ts
+import { Component } from '@angular/core';
+import { Styled, StyledProp, Theme } from '@design4pro/angular-jss';
+
+@Component({
+ selector: 'angular-jss-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css'],
+})
+@Styled(({ css, injectGlobal }) => {
+ // global styles
+ injectGlobal({
+ '@global': {
+ ':root': {
+ '--background-color': (data: { backgroundColor: string }) => data.backgroundColor,
+ },
+ },
+ });
+
+ // element styles
+ return css(
+ (theme: Theme) => ({
+ root: {
+ color: '#fff',
+ backgroundColor: 'var(--background-color)',
+ padding: '20px',
+ direction: theme.direction,
+ },
+ }),
+ { name: 'first' }
+ );
+})
+export class AppComponent {
+ classes: any; // required to use `[ngClass]="classes.root"` in html template
+
+ @StyledProp() // mark property as styled property
+ backgroundColor = 'red';
+
+ click() {
+ this.backgroundColor = this.backgroundColor === 'red' ? 'green' : 'red';
+ }
+}
+```
+
+```html
+
+```
+
+## Config options
+
+## License
+
+[MIT](https://github.com/design4pro/angular-jss/blob/master/LICENSE.md) © DESIGN4 ᴾ ᴿ ᴼ
diff --git a/apps/webpage/src/app/app.component.html b/apps/webpage/src/app/app.component.html
index 8fd0fd3..bb11e48 100644
--- a/apps/webpage/src/app/app.component.html
+++ b/apps/webpage/src/app/app.component.html
@@ -1 +1,3 @@
-- You can activate distributed tasks executions and caching by - running: -
-nx connect-to-nx-cloud- - What is Nx Cloud? - -
Here are some things you can do with Nx:
-# Generate UI lib -nx g @nrwl/angular:lib ui - -# Add a component -nx g @nrwl/angular:component button --project ui-
nx graph-
# see what's been affected by changes -nx affected:graph - -# run tests for current changes -nx affected:test - -# run e2e tests for current changes -nx affected:e2e-
- Carefully crafted with - -
-
-Run `nx test angular-jss` to execute the unit tests.
+> [JSS](https://cssinjs.org/) integration with Angular
+
+[](https://npmjs.org/package/@design4pro/angular-jss)
+[](https://github.com/design4pro/angular-jss/jss/blob/master/LICENSE.md)
+[](https://npmjs.org/package/@design4pro/angular-jss)
+[](https://npmjs.org/package/@design4pro/angular-jss)
+[](https://github.com/design4pro/)
+
+## Features
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+
+## Installation
+
+Using `npm`:
+
+```sh
+npm install @design4pro/angular-jss
+```
+
+or using `yarn`:
+
+```sh
+yarn add @design4pro/angular-jss
+```
+
+## Usage
+
+Inject the `AngularJssModule` module into your root module:
+
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AngularJssModule } from '@design4pro/angular-jss';
+import { AppComponent } from './app.component';
+
+@NgModule({
+ declarations: [AppComponent],
+ imports: [BrowserModule, AngularJssModule.forRoot()],
+ providers: [],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+Use class decorator `Styled` to add styles to your component:
+
+```ts
+import { Component } from '@angular/core';
+import { Styled, StyledProp, Theme } from '@design4pro/angular-jss';
+
+@Component({
+ selector: 'angular-jss-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css'],
+})
+@Styled(({ css, injectGlobal }) => {
+ // global styles
+ injectGlobal({
+ '@global': {
+ ':root': {
+ '--background-color': (data: { backgroundColor: string }) => data.backgroundColor,
+ },
+ },
+ });
+
+ // element styles
+ return css(
+ (theme: Theme) => ({
+ root: {
+ color: '#fff',
+ backgroundColor: 'var(--background-color)',
+ padding: '20px',
+ direction: theme.direction,
+ },
+ }),
+ { name: 'first' }
+ );
+})
+export class AppComponent {
+ classes: any; // required to use `[ngClass]="classes.root"` in html template
+
+ @StyledProp() // mark property as styled property
+ backgroundColor = 'red';
+
+ click() {
+ this.backgroundColor = this.backgroundColor === 'red' ? 'green' : 'red';
+ }
+}
+```
+
+```html
+
+```
+
+## Config options
+
+## License
+
+[MIT](https://github.com/design4pro/angular-jss/blob/master/LICENSE.md) © DESIGN4 ᴾ ᴿ ᴼ
diff --git a/libs/angular-jss/logo.svg b/libs/angular-jss/logo.svg
new file mode 100644
index 0000000..dc4238c
--- /dev/null
+++ b/libs/angular-jss/logo.svg
@@ -0,0 +1,37 @@
+
\ No newline at end of file
diff --git a/libs/angular-jss/package.json b/libs/angular-jss/package.json
index 1422c39..ee6c9ad 100644
--- a/libs/angular-jss/package.json
+++ b/libs/angular-jss/package.json
@@ -1,6 +1,8 @@
{
"name": "@design4pro/angular-jss",
"version": "0.0.1",
+ "description": "Angular for JSS",
+ "license": "MIT",
"keywords": [
"angular",
"ng",
@@ -24,9 +26,9 @@
"@angular/common": "^13.2.0",
"@angular/core": "^13.2.0",
"jss": "^10.9.0",
+ "jss-plugin-camel-case": "^10.9.0",
"jss-plugin-global": "^10.9.0",
- "jss-plugin-rule-value-function": "^10.9.0",
- "memoize-one": "^6.0.0"
+ "jss-plugin-rule-value-function": "^10.9.0"
},
"dependencies": {
"tslib": "^2.3.0"
diff --git a/libs/angular-jss/src/index.ts b/libs/angular-jss/src/index.ts
index 68a173c..f34ea2f 100644
--- a/libs/angular-jss/src/index.ts
+++ b/libs/angular-jss/src/index.ts
@@ -1 +1,6 @@
+export { createGenerateId, SheetsRegistry } from 'jss';
export * from './lib/angular-jss.module';
+export * from './lib/angular-jss.service';
+export * from './lib/angular-jss.types';
+export * from './lib/ssr';
+export * from './lib/styled';
diff --git a/libs/angular-jss/src/lib/hooks/use-memo.ts b/libs/angular-jss/src/lib/hooks/use-memo.ts
index 9270b5b..c84461c 100644
--- a/libs/angular-jss/src/lib/hooks/use-memo.ts
+++ b/libs/angular-jss/src/lib/hooks/use-memo.ts
@@ -1,11 +1,35 @@
-import memoizeOne from 'memoize-one';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function weakMemoize(fn: any, resolver?: any) {
+ const cache = new WeakMap();
+ // instead of returning the function right away, store it in a variable...
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const memoized = function (...args: any) {
+ // eslint-disable-next-line prefer-spread
+ const key = resolver ? resolver.apply(null, args) : args[0];
+
+ if (cache.has(key)) {
+ return cache.get(key);
+ } else {
+ // eslint-disable-next-line prefer-spread
+ const result = fn.apply(null, args);
+
+ cache.set(key, result);
+
+ return result;
+ }
+ };
+ // add a method to it to get the cache
+ memoized.getCache = () => cache;
+ // now return the function
+ return memoized;
+}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function useMemo