5 |
9 | );
10 |
--------------------------------------------------------------------------------
/packages/example-modules/src/modules/factory-module-compat/index.ts:
--------------------------------------------------------------------------------
1 | import type { FactoryModule, WindowWithModule } from '@alfalab/scripts-modules';
2 |
3 | const factory: FactoryModule = (runParams, moduleState) => ({
4 | someData: 'Some data here',
5 | saySomething: () => alert('something'),
6 | runParams,
7 | ...moduleState,
8 | });
9 |
10 | (window as WindowWithModule).FactoryModuleCompat = factory;
11 |
--------------------------------------------------------------------------------
/packages/example-modules/src/modules/module-abstract/index.ts:
--------------------------------------------------------------------------------
1 | import { WindowWithModule } from '@alfalab/scripts-modules';
2 |
3 | /**
4 | * Этот модуль является "абстрактным", то есть он не имеет какой-либо заданной структуры. Он может содержать любые
5 | * функции, переменные, классы, интерфейсы, типы и т.д.
6 | */
7 |
8 | export function justSomeRandomFunctionThatWeWantToExport() {
9 | return 'hello';
10 | }
11 |
12 | export const someRandomVariableThatWeWantToExport = 'hello';
13 |
14 | (window as WindowWithModule).ModuleAbstract = {
15 | justSomeRandomFunctionThatWeWantToExport,
16 | someRandomVariableThatWeWantToExport,
17 | };
18 |
--------------------------------------------------------------------------------
/packages/example-modules/src/modules/module-compat/compat-module.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { PostcssFeatures } from '#/shared/postcss-features';
4 |
5 | export const CompatModule = () => (
6 | Example-modules app
6 | 7 |It's just an empty application that doesn't do anything.
8 |
7 | Это модуль ModuleCompat, который был загружен в режиме compat.
8 |
9 |
21 | )
22 |
--------------------------------------------------------------------------------
/packages/example-modules/src/modules/module-compat/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, unmountComponentAtNode } from 'react-dom';
3 |
4 | import type { WindowWithModule } from '@alfalab/scripts-modules';
5 | import { MountableModule } from '@alfalab/scripts-modules/src/module-loader/module-types';
6 |
7 | import { CompatModule } from '#/modules/module-compat/compat-module';
8 |
9 | import './styles.css';
10 |
11 | type ModuleType = MountableModule
10 | У виджета могут быть свои стили, которые автоматически будут изолированы от других стилей на странице.
11 | Единственное условие - виджет сам должен добавлять class="module-ID виджета" к корневому элементу.
12 |
13 |
18 |
19 |
14 | Этот текст должен быть синего цвета
15 |
16 |
17 |
9 |
18 | );
19 |
--------------------------------------------------------------------------------
/packages/example-modules/src/modules/module/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import type { ModuleMountFunction, ModuleUnmountFunction } from '@alfalab/scripts-modules';
5 |
6 | import { Module } from './example-module';
7 |
8 | export const mount: ModuleMountFunction = (targetNode, runParams, serverState) => {
9 | console.log('Module: mount', { runParams, serverState });
10 | if (!targetNode) {
11 | throw new Error('Target node is not defined for module');
12 | }
13 |
14 | ReactDOM.render(Модуль, загруженный через module-federation
10 |12 | Виджеты никак не ограничены в использовании каких либо библиотек. В этом примере мы 13 | используем react для рендринга виджета. 14 |
15 | 16 |Проверка стилей через shadow-dom
17 |
5 | Это модуль ServerStateModuleCompat, который был загружен в режиме compat. Главное его
6 | отличие от ModuleCompat - это то, что при его загрузке на страницу, он сразу же получает
7 | данные с сервера.
8 |
15 | );
16 |
--------------------------------------------------------------------------------
/packages/example-modules/src/modules/server-state-module/index.tsx:
--------------------------------------------------------------------------------
1 | // TODO: remove eslint-disable
2 | /* eslint-disable import/no-default-export */
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 |
6 | import type { ModuleMountFunction, ModuleUnmountFunction } from '@alfalab/scripts-modules';
7 |
8 | import { ServerStateModule } from './server-state-module';
9 |
10 | const mount: ModuleMountFunction
9 | Например сейчаc виджет получил данные:
10 |
14 | {JSON.stringify(props.serverState, null, 4)}
11 | Данные, полученные из клиента:
12 |{JSON.stringify(props.runParams, null, 4)}
13 |
7 |
17 | );
18 |
--------------------------------------------------------------------------------
/packages/example-modules/src/server/read-assets.ts:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 | import path from 'path';
3 |
4 | export function readAssetsManifest() {
5 | const manifestPath = path.join(process.cwd(), '.build/webpack-assets.json');
6 | const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
7 | const js: string[] = [];
8 | const css: string[] = [];
9 |
10 | ['vendor', 'main'].forEach((key) => {
11 | if (!manifest[key]) {
12 | return;
13 | }
14 | if (manifest[key].js) {
15 | js.push(manifest[key].js.replace(/^auto/, 'assets'));
16 | }
17 | if (manifest[key].css) {
18 | css.push(manifest[key].css.replace(/^auto/, 'assets'));
19 | }
20 | });
21 |
22 | return {
23 | js,
24 | css,
25 | };
26 | }
27 |
--------------------------------------------------------------------------------
/packages/example-modules/src/shared/postcss-features/index.ts:
--------------------------------------------------------------------------------
1 | export * from './postcss-features';
2 |
--------------------------------------------------------------------------------
/packages/example-modules/src/shared/postcss-features/postcss-features.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './styles.css';
4 | import styles from './styles.module.css';
5 |
6 | export const PostcssFeatures = () => (
7 | ServerStateModule
8 | 9 |Данные, полученные из сервера:
10 | 11 |{JSON.stringify(props.serverState, null, 4)}
12 |
13 | Данные, полученные из клиента:
14 | 15 |{JSON.stringify(props.runParams, null, 4)}
16 |
8 |
12 | );
13 |
--------------------------------------------------------------------------------
/packages/example-modules/src/shared/postcss-features/styles.css:
--------------------------------------------------------------------------------
1 | .module-postcss-features {
2 | margin-block: var(--gap-xl);
3 |
4 | &__paragraph {
5 | @mixin accent_caps;
6 |
7 | padding-inline-start: var(--gap-s);
8 | padding-block: var(--gap-3xs);
9 | box-shadow: var(--shadow-xs-hard-up);
10 | color: color-mod(var(--color-static-status-red) blend(rgba(255, 255, 255, 0.5) 50%));
11 | background-color: var(--color-static-graphic-milano-red);
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/example-modules/src/shared/postcss-features/styles.module.css:
--------------------------------------------------------------------------------
1 | .paragraph {
2 | @mixin accent_caps;
3 |
4 | padding-inline-start: var(--gap-s);
5 | padding-block: var(--gap-3xs);
6 | box-shadow: var(--shadow-xs-hard-up);
7 | color: color-mod(var(--color-static-status-red) blend(rgba(255, 255, 255, 0.5) 50%));
8 | background-color: var(--color-static-graphic-milano-red);
9 | }
10 |
--------------------------------------------------------------------------------
/packages/example-modules/tsconfig.eslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | // для корректной работы @typescript-eslint/parser
4 | "include": ["src", "./*.js", "./*.ts", "./validate-build/*.spec.ts", ".eslintrc.js", "bin"]
5 | }
6 |
--------------------------------------------------------------------------------
/packages/example-modules/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "arui-scripts/tsconfig.json",
3 | "include": [
4 | "global-definitions.d.ts",
5 | "src/**/*.ts",
6 | "src/**/*.tsx"
7 | ],
8 | "compilerOptions": {
9 | "baseUrl": "./",
10 | "paths": {
11 | "#/*": ["src/*"]
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/example-modules/validate-build/__snapshots__/build.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`modules should create valid css for ModuleCompat 1`] = `
4 | ".module-ModuleCompat .module-postcss-features{
5 | margin-block:24px;
6 | }
7 |
8 | .module-ModuleCompat .module-postcss-features__paragraph{
9 | font-size:12px;
10 | line-height:16px;
11 | font-weight:700;
12 | letter-spacing:1.25px;
13 | text-transform:uppercase;
14 |
15 | padding-inline-start:12px;
16 | padding-block:2px;
17 | box-shadow:0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04), 0 -2px 4px rgba(0, 0, 0, 0.16);
18 | color:rgb(236, 142, 133);
19 | background-color:#cd1501;
20 | }
21 |
22 | .module-ModuleCompat .styles-module-paragraph-UdpKs{
23 | font-size:12px;
24 | line-height:16px;
25 | font-weight:700;
26 | letter-spacing:1.25px;
27 | text-transform:uppercase;
28 |
29 | padding-inline-start:12px;
30 | padding-block:2px;
31 | box-shadow:0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04), 0 -2px 4px rgba(0, 0, 0, 0.16);
32 | color:rgb(236, 142, 133);
33 | background-color:#cd1501;
34 | }
35 |
36 | .module-ModuleCompat .primary{
37 | color:rgba(255, 0, 0, 0.5);
38 | margin-top:4px;
39 | }
40 |
41 | .module-ModuleCompat .primary__footer{
42 | color:blue;
43 | }
44 |
45 | @media (min-width: 1024px){.module-ModuleCompat .primary{
46 | color:coral
47 | }
48 | }
49 |
50 | .module-ModuleCompat .primary:hover .primary__footer{
51 | color:green;
52 | animation:someRandomAnimation 1s ease-in-out infinite alternate;
53 | }
54 |
55 | @media (min-width: 1280px){
56 | .module-ModuleCompat .primary.leftBorder:before{
57 | border-right:1px solid #c5c5c7;
58 | }
59 | }
60 | @keyframes someRandomAnimation{
61 | 0%{
62 | transform:scaleX(0);
63 | }
64 |
65 | 100%{
66 | transform:scaleX(1);
67 | }
68 | }
69 |
70 | "
71 | `;
72 |
--------------------------------------------------------------------------------
/packages/example-modules/validate-build/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "arui-scripts/tsconfig.json",
3 | "include": [
4 | "**/*.ts"
5 | ],
6 | "compilerOptions": {
7 | "baseUrl": "./",
8 | "allowSyntheticDefaultImports": true,
9 | "esModuleInterop": true
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/packages/example/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | extends: ['custom/common'],
4 | parserOptions: {
5 | tsconfigRootDir: __dirname,
6 | project: ['./tsconfig.eslint.json', './validate-build/tsconfig.json'],
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/packages/example/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .build
3 | build.tar
4 | .cache-loader
5 |
--------------------------------------------------------------------------------
/packages/example/README.md:
--------------------------------------------------------------------------------
1 | # arui-scripts-test
2 |
3 | Пакет для тестирования работы `arui-scripts`. Позволяет протестировать сборку, дев режим и другие команды
4 | arui-scripts.
5 |
--------------------------------------------------------------------------------
/packages/example/__tests__/setup.js:
--------------------------------------------------------------------------------
1 | // setup file
2 | import { configure } from 'enzyme';
3 | import Adapter from 'enzyme-adapter-react-16';
4 |
5 | configure({ adapter: new Adapter() });
6 |
--------------------------------------------------------------------------------
/packages/example/arui-scripts.config.ts:
--------------------------------------------------------------------------------
1 | import { PackageSettings } from 'arui-scripts';
2 |
3 | const aruiScriptsConfig: PackageSettings = {
4 | presets: './presets',
5 | clientPolyfillsEntry: './src/polyfills.js',
6 | serverEntry: './src/server/index',
7 | clientEntry: './src/client',
8 | componentsTheme: '../../node_modules/@alfalab/core-components/themes/corp.css',
9 | keepCssVars: false,
10 | debug: true,
11 | codeLoader: 'swc',
12 | jestCodeTransformer: 'swc',
13 | compatModules: {
14 | shared: {
15 | 'react': 'react',
16 | 'react-dom': 'reactDOM',
17 | }
18 | },
19 | modules: {
20 | shared: {
21 | 'react': {
22 | eager: true,
23 | requiredVersion: '^17.0.0',
24 | },
25 | 'react-dom': {
26 | eager: true,
27 | requiredVersion: '^17.0.0',
28 | }
29 | }
30 | }
31 | }
32 |
33 | export default aruiScriptsConfig;
34 |
--------------------------------------------------------------------------------
/packages/example/global-definitions.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.png' {
2 | const url: string;
3 | export default url;
4 | }
5 |
6 | declare module '*.svg' {
7 | const url: string;
8 | export default url;
9 | }
10 |
11 | declare module '*.module.css' {
12 | const styles: Recordpostcss features check:
9 |module.css paragraph
10 |native css paragraph
11 |
8 |
15 | );
16 |
--------------------------------------------------------------------------------
/packages/example/src/components/postcss-features/styles.css:
--------------------------------------------------------------------------------
1 | .postcss-features {
2 | margin-block: var(--gap-xl);
3 |
4 | &__paragraph {
5 | @mixin accent_caps;
6 |
7 | padding-inline-start: var(--gap-s);
8 | padding-block: var(--gap-3xs);
9 | box-shadow: var(--shadow-xs-hard-up);
10 | color: color-mod(var(--color-static-status-red) blend(rgba(255, 255, 255, 0.5) 50%));
11 | background-color: var(--color-static-graphic-milano-red);
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/example/src/components/postcss-features/styles.module.css:
--------------------------------------------------------------------------------
1 | .paragraph {
2 | @mixin accent_caps;
3 |
4 | padding-inline-start: var(--gap-s);
5 | padding-block: var(--gap-3xs);
6 | box-shadow: var(--shadow-xs-hard-up);
7 | color: color-mod(var(--color-static-status-red) blend(rgba(255, 255, 255, 0.5) 50%));
8 | background-color: var(--color-static-graphic-milano-red);
9 | }
10 |
11 | @media not screen and (--desktop) {
12 | .mediaTest {
13 | color: red;
14 | }
15 | }
16 |
17 | @media (--desktop), (--mobile) {
18 | .mediaTest2 {
19 | color: red;
20 | }
21 | }
22 |
23 | @media (--desktop-m) {
24 | .mediaTest3 {
25 | color: red;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/example/src/components/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --color-red: #f00;
3 | }
4 | body {
5 | background: aliceblue;
6 | }
7 |
8 | .btn {
9 | border-radius: 5px;
10 | border: 0;
11 | margin: 10px;
12 | font-size: 20px;
13 | padding: 15px;
14 | color: var(--color-red);
15 | background: linear-gradient(345deg, #aacac2, #3929bb);
16 | background-size: 400% 400%;
17 | animation: Insanity 2s ease infinite;
18 | }
19 |
20 | @keyframes Insanity {
21 | 0% {
22 | background-position: 0 50%;
23 | }
24 | 50% {
25 | background-position: 100% 50%;
26 | }
27 | 100% {
28 | background-position: 0 50%;
29 | }
30 | }
31 |
32 | .icon {
33 | padding-left: 5px;
34 | vertical-align: middle;
35 | }
36 |
--------------------------------------------------------------------------------
/packages/example/src/module-mounters/abstract-module.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Spinner } from '@alfalab/core-components/spinner';
4 | import { Underlay } from '@alfalab/core-components/underlay';
5 | import { createModuleFetcher, createModuleLoader, useModuleLoader } from '@alfalab/scripts-modules';
6 |
7 | type ModuleType = {
8 | justSomeRandomFunctionThatWeWantToExport: () => void;
9 | someRandomVariableThatWeWantToExport: string;
10 | }
11 |
12 | const loader = createModuleLoaderpostcss features check:
9 |module.css paragraph
10 |native css paragraph
11 |red text for not desktop rule
12 |red text for desktop or mobile rule
13 |red text for desktop-m rule
14 |Failed to load module
}
33 |
34 | {module && (
35 |
36 | {JSON.stringify(
37 | module,
38 | (key, value) =>
39 | typeof value === 'function' ? `[Function ${value.name}]` : value,
40 | 2,
41 | )}
42 |
43 | )}
44 | Failed to load module
}
36 |
37 |
38 |
34 | {loadingState === 'pending' &&
49 | Снизу кнопка, на которую навешена функция из модуля
50 |
51 |
52 |
53 | Failed to load module
}
36 |
37 | {module && (
38 |
39 | {JSON.stringify(
40 | module,
41 | (key, value) =>
42 | typeof value === 'function' ? `[Function ${value.name}]` : value,
43 | 2,
44 | )}
45 |
46 | )}
47 |
48 |
30 | К этому элементу не должны примениться стили из модуля
31 |
32 |
33 | Failed to load module
}
42 |
43 |
44 | Failed to load module
}
39 |
40 |
41 | Failed to load module
}
36 |
37 |
38 | Картинка с сервера:
26 |