@ecopages/lit 0.2.0-beta.9 → 0.2.0-rc.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.
@@ -1,115 +1,109 @@
1
- import { Worker } from "node:worker_threads";
2
- import { fileURLToPath } from "node:url";
3
- class LitStaticRenderWorkerClient {
4
- configModulePath;
5
- runtimeOrigin;
6
- worker = null;
7
- readyPromise = null;
8
- pending = /* @__PURE__ */ new Map();
9
- nextRenderId = 0;
10
- constructor({ configModulePath, runtimeOrigin }) {
11
- this.configModulePath = configModulePath;
12
- this.runtimeOrigin = runtimeOrigin;
13
- }
14
- rejectPending(error) {
15
- for (const pending of this.pending.values()) {
16
- pending.reject(error);
1
+ import { Worker } from 'node:worker_threads';
2
+ import { fileURLToPath } from 'node:url';
3
+ export class LitStaticRenderWorkerClient {
4
+ configModulePath;
5
+ runtimeOrigin;
6
+ worker = null;
7
+ readyPromise = null;
8
+ pending = new Map();
9
+ nextRenderId = 0;
10
+ constructor({ configModulePath, runtimeOrigin }) {
11
+ this.configModulePath = configModulePath;
12
+ this.runtimeOrigin = runtimeOrigin;
17
13
  }
18
- this.pending.clear();
19
- }
20
- async start() {
21
- if (this.readyPromise) {
22
- return this.readyPromise;
23
- }
24
- this.readyPromise = new Promise((resolveReady, rejectReady) => {
25
- const worker = new Worker(new URL("./lit-static-render-worker.js", import.meta.url), {
26
- execArgv: [...process.execArgv],
27
- env: {
28
- ...process.env,
29
- ECOPAGES_LIT_STATIC_RENDER_WORKER: "true"
14
+ rejectPending(error) {
15
+ for (const pending of this.pending.values()) {
16
+ pending.reject(error);
30
17
  }
31
- });
32
- this.worker = worker;
33
- worker.on("message", (message) => {
34
- if (message.type === "ready") {
35
- resolveReady();
36
- return;
18
+ this.pending.clear();
19
+ }
20
+ async start() {
21
+ if (this.readyPromise) {
22
+ return this.readyPromise;
37
23
  }
38
- if (message.type === "error") {
39
- if (message.id && this.pending.has(message.id)) {
40
- const pending = this.pending.get(message.id);
41
- this.pending.delete(message.id);
42
- pending.reject(new Error(message.message));
43
- return;
44
- }
45
- rejectReady(new Error(message.message));
46
- return;
24
+ this.readyPromise = new Promise((resolveReady, rejectReady) => {
25
+ const worker = new Worker(new URL('./lit-static-render-worker.js', import.meta.url), {
26
+ execArgv: [...process.execArgv],
27
+ env: {
28
+ ...process.env,
29
+ ECOPAGES_LIT_STATIC_RENDER_WORKER: 'true',
30
+ },
31
+ });
32
+ this.worker = worker;
33
+ worker.on('message', (message) => {
34
+ if (message.type === 'ready') {
35
+ resolveReady();
36
+ return;
37
+ }
38
+ if (message.type === 'error') {
39
+ if (message.id && this.pending.has(message.id)) {
40
+ const pending = this.pending.get(message.id);
41
+ this.pending.delete(message.id);
42
+ pending.reject(new Error(message.message));
43
+ return;
44
+ }
45
+ rejectReady(new Error(message.message));
46
+ return;
47
+ }
48
+ if (message.type === 'result') {
49
+ const pending = this.pending.get(message.id);
50
+ if (!pending) {
51
+ return;
52
+ }
53
+ this.pending.delete(message.id);
54
+ pending.resolve({ html: message.html, cacheStrategy: message.cacheStrategy });
55
+ }
56
+ });
57
+ worker.on('error', (error) => {
58
+ rejectReady(error instanceof Error ? error : new Error(String(error)));
59
+ });
60
+ worker.on('exit', (code) => {
61
+ const exitError = new Error(code === 0
62
+ ? 'Lit static render worker exited'
63
+ : `Lit static render worker exited with code ${code}`);
64
+ this.rejectPending(exitError);
65
+ if (code !== 0) {
66
+ rejectReady(exitError);
67
+ }
68
+ });
69
+ const initMessage = {
70
+ type: 'init',
71
+ configModulePath: this.configModulePath,
72
+ runtimeOrigin: this.runtimeOrigin,
73
+ };
74
+ worker.postMessage(initMessage);
75
+ });
76
+ return this.readyPromise;
77
+ }
78
+ async renderPage(input) {
79
+ await this.start();
80
+ const worker = this.worker;
81
+ if (!worker) {
82
+ throw new Error('Lit static render worker is not available');
47
83
  }
48
- if (message.type === "result") {
49
- const pending = this.pending.get(message.id);
50
- if (!pending) {
84
+ const id = String(++this.nextRenderId);
85
+ return new Promise((resolve, reject) => {
86
+ this.pending.set(id, { resolve, reject });
87
+ const renderMessage = {
88
+ type: 'render',
89
+ id,
90
+ filePath: input.filePath,
91
+ params: input.params,
92
+ query: input.query,
93
+ };
94
+ worker.postMessage(renderMessage);
95
+ });
96
+ }
97
+ async dispose() {
98
+ if (!this.worker) {
51
99
  return;
52
- }
53
- this.pending.delete(message.id);
54
- pending.resolve(message.html);
55
- }
56
- });
57
- worker.on("error", (error) => {
58
- rejectReady(error instanceof Error ? error : new Error(String(error)));
59
- });
60
- worker.on("exit", (code) => {
61
- const exitError = new Error(
62
- code === 0 ? "Lit static render worker exited" : `Lit static render worker exited with code ${code}`
63
- );
64
- this.rejectPending(exitError);
65
- if (code !== 0) {
66
- rejectReady(exitError);
67
100
  }
68
- });
69
- const initMessage = {
70
- type: "init",
71
- configModulePath: this.configModulePath,
72
- runtimeOrigin: this.runtimeOrigin
73
- };
74
- worker.postMessage(initMessage);
75
- });
76
- return this.readyPromise;
77
- }
78
- async renderPage(input) {
79
- await this.start();
80
- if (!this.worker) {
81
- throw new Error("Lit static render worker is not available");
82
- }
83
- const id = String(++this.nextRenderId);
84
- const worker = this.worker;
85
- if (!worker) {
86
- throw new Error("Lit static render worker is not available");
87
- }
88
- return new Promise((resolve, reject) => {
89
- this.pending.set(id, { resolve, reject });
90
- const renderMessage = {
91
- type: "render",
92
- id,
93
- filePath: input.filePath,
94
- params: input.params
95
- };
96
- worker.postMessage(renderMessage);
97
- });
98
- }
99
- async dispose() {
100
- if (!this.worker) {
101
- return;
101
+ this.rejectPending(new Error('Lit static render worker was disposed'));
102
+ const worker = this.worker;
103
+ this.worker = null;
104
+ this.readyPromise = null;
105
+ worker.postMessage({ type: 'shutdown' });
106
+ await worker.terminate();
102
107
  }
103
- this.rejectPending(new Error("Lit static render worker was disposed"));
104
- const worker = this.worker;
105
- this.worker = null;
106
- this.readyPromise = null;
107
- worker.postMessage({ type: "shutdown" });
108
- await worker.terminate();
109
- }
110
108
  }
111
- const litStaticRenderWorkerEntryPath = fileURLToPath(new URL("./lit-static-render-worker.js", import.meta.url));
112
- export {
113
- LitStaticRenderWorkerClient,
114
- litStaticRenderWorkerEntryPath
115
- };
109
+ export const litStaticRenderWorkerEntryPath = fileURLToPath(new URL('./lit-static-render-worker.js', import.meta.url));
@@ -1,74 +1,80 @@
1
- import { parentPort } from "node:worker_threads";
2
- import { pathToFileURL } from "node:url";
3
- import { setupAppRuntimePlugins } from "@ecopages/core/build/build-adapter";
4
- import { installAppRuntimeBuildExecutor } from "@ecopages/core/build/runtime-build-executor";
5
- import { RouteRendererFactory } from "@ecopages/core/route-renderer/route-renderer";
6
- import "./dom-shim.js";
1
+ import { parentPort } from 'node:worker_threads';
2
+ import { pathToFileURL } from 'node:url';
3
+ import { setupAppRuntimePlugins } from '@ecopages/core/build/build-adapter';
4
+ import { installBuildRuntime } from '@ecopages/core/build/build-runtime';
5
+ import { RouteRendererFactory } from '@ecopages/core/route-renderer/route-renderer';
6
+ import './dom-shim.js';
7
7
  let appConfig = null;
8
8
  let routeRendererFactory = null;
9
+ /**
10
+ * Loads app config in the worker isolate and bootstraps rendering.
11
+ *
12
+ * @remarks
13
+ * Processor `.setup()` is skipped here — the main thread already prepared disk artifacts
14
+ * before the Lit worker started (`ECOPAGES_LIT_STATIC_RENDER_WORKER`).
15
+ */
9
16
  async function initializeWorker(configModulePath, runtimeOrigin) {
10
- const configModule = await import(
11
- /* @vite-ignore */
12
- pathToFileURL(configModulePath).href
13
- );
14
- appConfig = configModule.default ?? configModule;
15
- await setupAppRuntimePlugins({
16
- appConfig,
17
- runtimeOrigin
18
- });
19
- installAppRuntimeBuildExecutor(appConfig);
20
- routeRendererFactory = new RouteRendererFactory({
21
- appConfig,
22
- runtimeOrigin
23
- });
17
+ const configModule = await import(/* @vite-ignore */ pathToFileURL(configModulePath).href);
18
+ appConfig = (configModule.default ?? configModule);
19
+ await setupAppRuntimePlugins({
20
+ appConfig,
21
+ runtimeOrigin,
22
+ });
23
+ installBuildRuntime(appConfig);
24
+ routeRendererFactory = new RouteRendererFactory({
25
+ appConfig,
26
+ runtimeOrigin,
27
+ });
24
28
  }
25
- async function renderPage(filePath, params) {
26
- if (!routeRendererFactory) {
27
- throw new Error("Lit static render worker is not initialized");
28
- }
29
- const result = await routeRendererFactory.getPageRenderer(filePath).execute({
30
- file: filePath,
31
- params
32
- });
33
- const body = result.body;
34
- if (typeof body === "string") {
35
- return body;
36
- }
37
- if (Buffer.isBuffer(body)) {
38
- return body.toString("utf8");
39
- }
40
- if (body instanceof ReadableStream) {
41
- return new Response(body).text();
42
- }
43
- throw new TypeError(`Unsupported Lit static render body type: ${typeof body}`);
29
+ async function renderPage(filePath, params, query) {
30
+ if (!routeRendererFactory) {
31
+ throw new Error('Lit static render worker is not initialized');
32
+ }
33
+ const result = await routeRendererFactory.getPageRenderer(filePath).execute({
34
+ file: filePath,
35
+ params,
36
+ query,
37
+ });
38
+ const body = result.body;
39
+ if (typeof body === 'string') {
40
+ return { html: body, cacheStrategy: result.cacheStrategy };
41
+ }
42
+ if (Buffer.isBuffer(body)) {
43
+ return { html: body.toString('utf8'), cacheStrategy: result.cacheStrategy };
44
+ }
45
+ if (body instanceof ReadableStream) {
46
+ return { html: await new Response(body).text(), cacheStrategy: result.cacheStrategy };
47
+ }
48
+ throw new TypeError(`Unsupported Lit static render body type: ${typeof body}`);
44
49
  }
45
50
  function postMessage(message) {
46
- parentPort?.postMessage(message);
51
+ parentPort?.postMessage(message);
47
52
  }
48
53
  if (!parentPort) {
49
- throw new Error("Lit static render worker must be started as a worker thread");
54
+ throw new Error('Lit static render worker must be started as a worker thread');
50
55
  }
51
- parentPort.on("message", async (message) => {
52
- try {
53
- if (message.type === "init") {
54
- await initializeWorker(message.configModulePath, message.runtimeOrigin);
55
- postMessage({ type: "ready" });
56
- return;
57
- }
58
- if (message.type === "shutdown") {
59
- process.exit(0);
60
- return;
61
- }
62
- if (message.type === "render") {
63
- const html = await renderPage(message.filePath, message.params);
64
- postMessage({ type: "result", id: message.id, html });
56
+ parentPort.on('message', async (message) => {
57
+ try {
58
+ if (message.type === 'init') {
59
+ await initializeWorker(message.configModulePath, message.runtimeOrigin);
60
+ postMessage({ type: 'ready' });
61
+ return;
62
+ }
63
+ if (message.type === 'shutdown') {
64
+ process.exit(0);
65
+ return;
66
+ }
67
+ if (message.type === 'render') {
68
+ const result = await renderPage(message.filePath, message.params, message.query);
69
+ postMessage({ type: 'result', id: message.id, ...result });
70
+ }
65
71
  }
66
- } catch (error) {
67
- const errorMessage = error instanceof Error ? error.message : String(error);
68
- if (message.type === "render") {
69
- postMessage({ type: "error", id: message.id, message: errorMessage });
70
- return;
72
+ catch (error) {
73
+ const errorMessage = error instanceof Error ? error.message : String(error);
74
+ if (message.type === 'render') {
75
+ postMessage({ type: 'error', id: message.id, message: errorMessage });
76
+ return;
77
+ }
78
+ postMessage({ type: 'error', message: errorMessage });
71
79
  }
72
- postMessage({ type: "error", message: errorMessage });
73
- }
74
80
  });
@@ -1,4 +1 @@
1
- const LIT_PLUGIN_NAME = "lit";
2
- export {
3
- LIT_PLUGIN_NAME
4
- };
1
+ export const LIT_PLUGIN_NAME = 'lit';
@@ -13,6 +13,11 @@ export declare const PLUGIN_NAME = "lit";
13
13
  /**
14
14
  * The Lit plugin class
15
15
  * This plugin provides support for Lit components in Ecopages
16
+ *
17
+ * @remarks
18
+ * Owns the {@link LitStaticRenderSession} for worker SSR. Renderers receive a
19
+ * lazy `getRenderSession` accessor so construction before {@link setup} still
20
+ * observes the session once setup assigns it.
16
21
  */
17
22
  export declare class LitPlugin extends IntegrationPlugin {
18
23
  renderer: typeof LitRenderer;
@@ -20,6 +25,9 @@ export declare class LitPlugin extends IntegrationPlugin {
20
25
  constructor(options?: Omit<IntegrationPluginConfig, 'name'>);
21
26
  getDependencies(): AssetDefinition[];
22
27
  private createRenderSession;
28
+ initializeRenderer(options?: {
29
+ rendererModules?: unknown;
30
+ }): LitRenderer;
23
31
  setup(): Promise<void>;
24
32
  teardown(): Promise<void>;
25
33
  beforeStaticExport(context: StaticExportContext): Promise<void>;
package/src/lit.plugin.js CHANGED
@@ -1,98 +1,116 @@
1
- import "./console.js";
2
- import {
3
- IntegrationPlugin
4
- } from "@ecopages/core/plugins/integration-plugin";
5
- import path from "node:path";
6
- import { AssetFactory } from "@ecopages/core/services/asset-processing-service";
7
- import { litElementHydrateScript } from "./lit-element-hydrate.js";
8
- import { LIT_PLUGIN_NAME } from "./lit.constants.js";
9
- import { LitRenderer } from "./lit-renderer.js";
10
- import { setActiveLitStaticRenderSession } from "./lit-static-render-coordinator.js";
11
- import { LitStaticRenderSession } from "./lit-static-render-session.js";
12
- const PLUGIN_NAME = LIT_PLUGIN_NAME;
13
- class LitPlugin extends IntegrationPlugin {
14
- renderer = LitRenderer;
15
- renderSession = null;
16
- constructor(options) {
17
- super({
18
- name: PLUGIN_NAME,
19
- extensions: [".lit.tsx"],
20
- ...options
21
- });
22
- this.integrationDependencies.unshift(...this.getDependencies());
23
- }
24
- getDependencies() {
25
- return [
26
- /**
27
- * BUG ALERT
28
- * Due to an issue appeared in Bun 1.2.2, we need to use a workaround to import the hydrate script.
29
- * This is a temporary solution until the issue is resolved.
30
- * The litElementHydrateScript is the same file built on Bun 1.1.45.
31
- * https://github.com/oven-sh/bun/issues/17180
32
- *
33
- * AssetFactory.createNodeModuleScript({
34
- * position: 'head',
35
- * importPath: '@lit-labs/ssr-client/lit-element-hydrate-support.js'
36
- * })
37
- */
38
- AssetFactory.createInlineContentScript({
39
- position: "head",
40
- content: `(() => {${litElementHydrateScript}})();`,
41
- bundle: false,
42
- attributes: {
43
- "data-eco-script-id": "lit-hydrate-support"
1
+ /**
2
+ * This module contains the Lit plugin
3
+ * @module
4
+ */
5
+ import './console.js';
6
+ import { IntegrationPlugin, } from '@ecopages/core/plugins/integration-plugin';
7
+ import { isLitStaticRenderWorkerThread } from '@ecopages/core/build/lit-static-render-worker-context';
8
+ import path from 'node:path';
9
+ import { AssetFactory } from '@ecopages/core/services/asset-processing-service';
10
+ import { litElementHydrateScript } from './lit-element-hydrate.js';
11
+ import { LIT_PLUGIN_NAME } from './lit.constants.js';
12
+ import { LitRenderer } from './lit-renderer.js';
13
+ import { LitStaticRenderSession } from './lit-static-render-session.js';
14
+ /**
15
+ * The name of the Lit plugin
16
+ */
17
+ export const PLUGIN_NAME = LIT_PLUGIN_NAME;
18
+ /**
19
+ * The Lit plugin class
20
+ * This plugin provides support for Lit components in Ecopages
21
+ *
22
+ * @remarks
23
+ * Owns the {@link LitStaticRenderSession} for worker SSR. Renderers receive a
24
+ * lazy `getRenderSession` accessor so construction before {@link setup} still
25
+ * observes the session once setup assigns it.
26
+ */
27
+ export class LitPlugin extends IntegrationPlugin {
28
+ renderer = LitRenderer;
29
+ renderSession = null;
30
+ constructor(options) {
31
+ super({
32
+ name: PLUGIN_NAME,
33
+ extensions: ['.lit.tsx'],
34
+ ...options,
35
+ });
36
+ this.integrationDependencies.unshift(...this.getDependencies());
37
+ }
38
+ getDependencies() {
39
+ return [
40
+ /**
41
+ * BUG ALERT
42
+ * Due to an issue appeared in Bun 1.2.2, we need to use a workaround to import the hydrate script.
43
+ * This is a temporary solution until the issue is resolved.
44
+ * The litElementHydrateScript is the same file built on Bun 1.1.45.
45
+ * https://github.com/oven-sh/bun/issues/17180
46
+ *
47
+ * AssetFactory.createNodeModuleScript({
48
+ * position: 'head',
49
+ * importPath: '@lit-labs/ssr-client/lit-element-hydrate-support.js'
50
+ * })
51
+ */
52
+ AssetFactory.createInlineContentScript({
53
+ position: 'head',
54
+ content: `(() => {${litElementHydrateScript}})();`,
55
+ bundle: false,
56
+ attributes: {
57
+ 'data-eco-script-id': 'lit-hydrate-support',
58
+ },
59
+ }),
60
+ ];
61
+ }
62
+ createRenderSession() {
63
+ if (!this.appConfig || !this.assetProcessingService) {
64
+ throw new Error('Lit plugin must be initialized before starting the render worker');
44
65
  }
45
- })
46
- ];
47
- }
48
- createRenderSession() {
49
- if (!this.appConfig || !this.assetProcessingService) {
50
- throw new Error("Lit plugin must be initialized before starting the render worker");
66
+ return new LitStaticRenderSession({
67
+ resolveDependencyPath: (componentDir, sourcePath) => path.join(componentDir, sourcePath),
68
+ processDependencies: this.assetProcessingService.processDependencies.bind(this.assetProcessingService),
69
+ preferSourceImports: typeof Bun !== 'undefined',
70
+ });
71
+ }
72
+ initializeRenderer(options) {
73
+ const renderer = new this.renderer({
74
+ ...this.createRendererOptions(options),
75
+ getRenderSession: () => this.renderSession ?? undefined,
76
+ });
77
+ return this.attachRendererRuntimeServices(renderer);
51
78
  }
52
- return new LitStaticRenderSession({
53
- resolveDependencyPath: (componentDir, sourcePath) => path.join(componentDir, sourcePath),
54
- processDependencies: this.assetProcessingService.processDependencies.bind(this.assetProcessingService),
55
- preferSourceImports: typeof Bun !== "undefined"
56
- });
57
- }
58
- async setup() {
59
- await super.setup();
60
- if (!this.appConfig?.absolutePaths?.config) {
61
- throw new Error("[ecopages][lit] Lit server rendering requires appConfig.absolutePaths.config");
79
+ async setup() {
80
+ await super.setup();
81
+ if (!this.appConfig?.absolutePaths?.config) {
82
+ throw new Error('[ecopages][lit] Lit server rendering requires appConfig.absolutePaths.config');
83
+ }
84
+ if (isLitStaticRenderWorkerThread()) {
85
+ return;
86
+ }
87
+ this.renderSession = this.createRenderSession();
88
+ await this.renderSession.ensureWorker({
89
+ configModulePath: this.appConfig.absolutePaths.config,
90
+ runtimeOrigin: this.runtimeOrigin,
91
+ });
62
92
  }
63
- if (process.env.ECOPAGES_LIT_STATIC_RENDER_WORKER === "true") {
64
- return;
93
+ async teardown() {
94
+ await this.renderSession?.dispose();
95
+ this.renderSession = null;
96
+ await super.teardown();
65
97
  }
66
- this.renderSession = this.createRenderSession();
67
- await this.renderSession.ensureWorker({
68
- configModulePath: this.appConfig.absolutePaths.config,
69
- runtimeOrigin: this.runtimeOrigin
70
- });
71
- setActiveLitStaticRenderSession(this.renderSession);
72
- }
73
- async teardown() {
74
- await this.renderSession?.dispose();
75
- this.renderSession = null;
76
- setActiveLitStaticRenderSession(null);
77
- await super.teardown();
78
- }
79
- async beforeStaticExport(context) {
80
- if (!this.renderSession) {
81
- this.renderSession = this.createRenderSession();
82
- await this.renderSession.ensureWorker({
83
- configModulePath: context.appConfig.absolutePaths.config,
84
- runtimeOrigin: context.baseUrl
85
- });
86
- setActiveLitStaticRenderSession(this.renderSession);
98
+ async beforeStaticExport(context) {
99
+ if (!this.renderSession) {
100
+ this.renderSession = this.createRenderSession();
101
+ await this.renderSession.ensureWorker({
102
+ configModulePath: context.appConfig.absolutePaths.config,
103
+ runtimeOrigin: context.baseUrl,
104
+ });
105
+ }
106
+ await this.renderSession.preloadStaticRoutes(context);
87
107
  }
88
- await this.renderSession.preloadStaticRoutes(context);
89
- }
90
108
  }
91
- function litPlugin(options) {
92
- return new LitPlugin(options);
109
+ /**
110
+ * Factory function to create a Lit plugin instance
111
+ * @param options Configuration options for the Lit plugin
112
+ * @returns A new LitPlugin instance
113
+ */
114
+ export function litPlugin(options) {
115
+ return new LitPlugin(options);
93
116
  }
94
- export {
95
- LitPlugin,
96
- PLUGIN_NAME,
97
- litPlugin
98
- };
@@ -1,13 +1,21 @@
1
- import { unsafeCSS } from "lit";
2
- const StyledMixin = (superClass, css = []) => {
3
- class StyledMixinClass extends superClass {
4
- static styles = [
5
- superClass.styles ?? [],
6
- ...css.map((styles) => unsafeCSS(styles))
7
- ];
8
- }
9
- return StyledMixinClass;
10
- };
11
- export {
12
- StyledMixin
1
+ /**
2
+ * This module contains StyledMixin
3
+ * It is used to add styles to a LitElement
4
+ * @module
5
+ */
6
+ import { unsafeCSS } from 'lit';
7
+ /**
8
+ * A mixin to add styles to a LitElement
9
+ * @param superClass - The class to mix into
10
+ * @param css - The styles to add
11
+ * @returns The class with the styles added
12
+ */
13
+ export const StyledMixin = (superClass, css = []) => {
14
+ class StyledMixinClass extends superClass {
15
+ static styles = [
16
+ superClass.styles ?? [],
17
+ ...css.map((styles) => unsafeCSS(styles)),
18
+ ];
19
+ }
20
+ return StyledMixinClass;
13
21
  };