-
Notifications
You must be signed in to change notification settings - Fork 3
/
mitosis.config.cjs
139 lines (132 loc) · 5.2 KB
/
mitosis.config.cjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
const traverse = require('traverse');
const getTargetPath = ({ target }) => {
switch (target) {
case 'vue3':
return 'vue';
// Generate angular artifacts in a temporary folder, then move different entry points to independent folders (by means of scripts)
// Reference: https://sandroroth.com/blog/angular-library#more-entry-points
case 'angular':
return 'angular/projects/boxyhq/angular-ui/tmp';
case 'svelte':
return 'svelte/src/tmp';
default:
return target;
}
};
const VUE_OPTIONS = {
typescript: false,
api: 'composition',
};
const components = ['Login', 'CreateOIDCConnection', 'CreateSAMLConnection'];
const isMitosisNode = (x) => x && x['@type'] === '@builder.io/mitosis/node';
/** @type {import('@builder.io/mitosis').MitosisConfig} */
module.exports = {
files: 'src/**',
dest: '.',
getTargetPath,
options: {
react: {
typescript: true,
plugins: [
() => ({
// Mitosis right now passes Ref.current instead of the ref itself. Here we simply replace '..Ref.current' with ''
code: {
pre: (code, json) => {
const fixRefProp = json.meta.useMetadata?.fixRefProp;
if (fixRefProp) {
traverse(json).forEach((node) => {
if (isMitosisNode(node) && 'buttonRef' in node.bindings) {
// console.log(node.bindings, code);
code = code.replaceAll(/\.current\}/g, '}');
}
});
}
return code;
},
},
}),
],
},
angular: {
standalone: true,
typescript: true,
plugins: [
() => ({
json: {
pre: (json) => {
if (components.includes(json.name)) {
// Replace second argument passed to cssClassAssembler function with literal class name
// split code that is present in classes with a new line
const splitStateClasses = json.state.classes.code.split('\n');
// Map over the splitted array and replace the second argument passed to cssClassAssembler
const newClasses = splitStateClasses.map((el) => {
// replacedValue = el.replace(/(\w+)\(([^,]+),([^)]+)\)/, '$1($2)');
return el.replaceAll(/defaultClasses\.(\w+)/g, "'$1'");
});
const newClassesCode = newClasses.join('\n');
json.state.classes.code = newClassesCode;
traverse(json).forEach(function (item) {
if (!isMitosisNode(item)) return;
Object.entries(item.bindings).find(([key, value]) => {
if (key === 'class' && value.code.includes('defaultClasses')) {
const classBinding = item.bindings.class;
const cssClass = classBinding.code.replaceAll(/defaultClasses\.(\w+)/g, '$1');
item.properties.class = cssClass;
delete item.bindings.class;
}
});
});
// Remove extra import defaultClasses
// filter imports and return only those paths that dont have the path
// containing './index.module.css'
const filteredImports = json.imports.filter((imp) => {
return imp.path !== './index.module.css';
});
json.imports = filteredImports;
}
},
},
code: {
pre: (code) => {
let tweakedCode = code;
// Add a styleUrls that includes all default styles for the component
if (tweakedCode.includes('standalone: true')) {
tweakedCode = tweakedCode.replace(
'standalone: true',
`standalone: true,\n styleUrls: ['./index.css']`
);
}
// Add types for the emitted event object
// for login
if (tweakedCode.includes('onSubmit = new EventEmitter')) {
tweakedCode = tweakedCode.replace(
'EventEmitter()',
`EventEmitter<{
ssoIdentifier: string;
cb: (err: { error: { message: string } } | null) => void;
}>()`
);
}
if (tweakedCode.includes('errorCallback = new EventEmitter()')) {
tweakedCode = tweakedCode.replace(
'errorCallback = new EventEmitter()',
`errorCallback = new EventEmitter<string>()`
);
}
// Ideally the generated code should use [disabled] instead of [attr.disabled], hence the below transformation is needed.
if (tweakedCode.includes('[attr.disabled]')) {
tweakedCode = tweakedCode.replaceAll('[attr.disabled]', '[disabled]');
}
return tweakedCode;
},
},
}),
],
},
vue: { ...VUE_OPTIONS, typescript: true },
vue2: VUE_OPTIONS,
svelte: { typescript: true },
},
targets: ['react', 'angular', 'vue', 'svelte'],
exclude: ['src/css.d.ts'],
};