@rancher/create-extension 1.0.0-rc.2 → 1.0.1
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/app/app.package.json +1 -2
- package/app/files/.eslintignore +2 -0
- package/app/files/.github/workflows/build-extension-catalog.yml +6 -2
- package/app/files/.github/workflows/build-extension-charts.yml +3 -2
- package/app/files/.vscode/settings.json +1 -0
- package/app/files/gitignore +4 -1
- package/app/files/tsconfig.json +2 -2
- package/app/init +3 -33
- package/app/package.json +1 -1
- package/init +21 -49
- package/package.json +6 -10
- package/pkg/init +57 -68
- package/pkg/package.json +7 -1
- package/update/init +11 -16
- package/update/package.json +1 -1
- package/update/upgrade +4 -4
- package/migrate/config.js +0 -7
- package/migrate/ignore.js +0 -14
- package/migrate/init +0 -35
- package/migrate/package.json +0 -23
- package/migrate/params.js +0 -7
- package/migrate/stats.js +0 -13
- package/migrate/tasks/eslintUpdates.js +0 -70
- package/migrate/tasks/index.js +0 -19
- package/migrate/tasks/nvmUpdates.js +0 -51
- package/migrate/tasks/packageUpdates.js +0 -242
- package/migrate/tasks/routerUpdates.js +0 -23
- package/migrate/tasks/stylesUpdates.js +0 -19
- package/migrate/tasks/tsUpdates.js +0 -19
- package/migrate/tasks/vueConfigUpdates.js +0 -30
- package/migrate/tasks/vueSyntaxUpdates.js +0 -148
- package/migrate/utils/content.js +0 -165
- package/migrate/utils/index.js +0 -4
- package/migrate/utils/vueSyntax.js +0 -126
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
const glob = require('glob');
|
|
2
|
-
const { replaceCases } = require('../utils/content');
|
|
3
|
-
const {
|
|
4
|
-
vueSetReplacement, vueDeleteReplacement, vueKeyReplacement, vueTemplateKeyReplacement, vueTemplateKeyRemoval
|
|
5
|
-
} = require('../utils/vueSyntax');
|
|
6
|
-
|
|
7
|
-
function vueSyntaxUpdates(params) {
|
|
8
|
-
const files = glob.sync(
|
|
9
|
-
params.paths || '**/*.{vue,js,ts}',
|
|
10
|
-
{
|
|
11
|
-
ignore: [
|
|
12
|
-
...params.ignore,
|
|
13
|
-
'**/*.spec.ts',
|
|
14
|
-
'**/*.spec.js',
|
|
15
|
-
'**/__tests__/**',
|
|
16
|
-
'**/*.test.ts',
|
|
17
|
-
'jest.setup.js',
|
|
18
|
-
'**/*.d.ts',
|
|
19
|
-
'**/vue-shim.ts',
|
|
20
|
-
],
|
|
21
|
-
}
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
const replacementCases = [
|
|
25
|
-
// Handle Vue.set and this.$set
|
|
26
|
-
[/\bVue\.set\(([^,]+),\s*([^,]+),\s*([^)]+)\)/g, (match, obj, prop, val) => vueSetReplacement(match, obj, prop, val), 'Replace Vue.set with direct assignment - https://vuejs.org/guide/extras/reactivity-in-depth.html'],
|
|
27
|
-
[/\bthis\.\$set\(([^,]+),\s*([^,]+),\s*([^)]+)\)/g, (match, obj, prop, val) => vueSetReplacement(match, obj, prop, val), 'Replace this.$set with direct assignment - https://vuejs.org/guide/extras/reactivity-in-depth.html'],
|
|
28
|
-
|
|
29
|
-
// Handle Vue.delete and this.$delete
|
|
30
|
-
[/\bVue\.delete\(([^,]+),\s*([^)]+)\)/g, (match, obj, prop) => vueDeleteReplacement(match, obj, prop), 'Replace Vue.delete with delete operator - https://vuejs.org/guide/extras/reactivity-in-depth.html'],
|
|
31
|
-
[/\bthis\.\$delete\(([^,]+),\s*([^)]+)\)/g, (match, obj, prop) => vueDeleteReplacement(match, obj, prop), 'Replace this.$delete with delete operator - https://vuejs.org/guide/extras/reactivity-in-depth.html'],
|
|
32
|
-
|
|
33
|
-
// Replace Vue import with createApp and initialize vueApp
|
|
34
|
-
[/import Vue from 'vue';?/g, `import { createApp } from 'vue';\nconst vueApp = createApp({});`, 'Replace Vue import with createApp - https://v3-migration.vuejs.org/breaking-changes/global-api.html#a-new-global-api-createapp'],
|
|
35
|
-
|
|
36
|
-
// Replace new Vue({}) with createApp({})
|
|
37
|
-
[/new Vue\(/g, 'createApp(', 'Replace new Vue with createApp - https://v3-migration.vuejs.org/breaking-changes/global-api.html#a-new-global-api-createapp'],
|
|
38
|
-
|
|
39
|
-
// Replace Vue global methods with vueApp methods
|
|
40
|
-
[/\bVue\.(config|directive|filter|mixin|component|use|prototype)\b/g, (match, method) => `vueApp.${ method }`, 'Replace Vue global methods with vueApp methods - https://v3-migration.vuejs.org/breaking-changes/global-api.html#a-new-global-api-createapp'],
|
|
41
|
-
|
|
42
|
-
// Update Vue.prototype to vueApp.config.globalProperties
|
|
43
|
-
[/Vue\.prototype/g, 'vueApp.config.globalProperties', 'Update Vue.prototype to vueApp.config.globalProperties - https://v3-migration.vuejs.org/breaking-changes/global-api.html#a-new-global-api-createapp'],
|
|
44
|
-
|
|
45
|
-
// Remove Vue.util as it's no longer available
|
|
46
|
-
[/Vue\.util/g, '', 'Vue.util is private and no longer available - https://v3-migration.vuejs.org/migration-build.html#partially-compatible-with-caveats'],
|
|
47
|
-
|
|
48
|
-
// Replace vue-virtual-scroll-list with vue3-virtual-scroll-list
|
|
49
|
-
[`vue-virtual-scroll-list`, `vue3-virtual-scroll-list`, 'library update'],
|
|
50
|
-
|
|
51
|
-
// Update Vue.nextTick
|
|
52
|
-
[/\bVue\.nextTick\b/g, 'nextTick', 'Update Vue.nextTick to nextTick - https://v3-migration.vuejs.org/breaking-changes/global-api-treeshaking.html#global-api-treeshaking'],
|
|
53
|
-
[/\bthis\.nextTick\b/g, 'nextTick', 'Update this.nextTick to nextTick - https://v3-migration.vuejs.org/breaking-changes/global-api-treeshaking.html#global-api-treeshaking'],
|
|
54
|
-
// Note: You may need to import nextTick from 'vue' where used.
|
|
55
|
-
|
|
56
|
-
// Update props default function context
|
|
57
|
-
[/(default)\(\)\s*\{([\s\S]*?)return\s+([\s\S]*?)\}/g, (match, def, middle, retVal) => `${ def }(props) {${ middle }return ${ retVal }}`, 'Update props default function context - https://v3-migration.vuejs.org/breaking-changes/props-default-this.html'],
|
|
58
|
-
|
|
59
|
-
// Replace @input with @update:value (excluding plainInputEvent)
|
|
60
|
-
[/@input="((?!.*plainInputEvent).+?)"/g, (_, handler) => `@update:value="${ handler }"`, 'Update @input to @update:value'],
|
|
61
|
-
|
|
62
|
-
// Update v-model syntax
|
|
63
|
-
[/v-model=/g, 'v-model:value=', 'Update v-model to v-model:value'],
|
|
64
|
-
|
|
65
|
-
// Replace .sync modifier with v-model
|
|
66
|
-
[/:([a-zA-Z0-9_-]+)\.sync=/g, 'v-model:$1=', 'Update .sync modifier to v-model'],
|
|
67
|
-
|
|
68
|
-
// Replace click.native with click
|
|
69
|
-
[/(\b@click)\.native/g, '$1', 'Remove .native modifier from @click'],
|
|
70
|
-
|
|
71
|
-
// Remove v-on="$listeners"
|
|
72
|
-
[/v-on="\$listeners"/g, '', 'Remove v-on="$listeners" as it is no longer needed - https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html'],
|
|
73
|
-
|
|
74
|
-
// Update :listeners="$listeners" to v-bind="$attrs"
|
|
75
|
-
[/:listeners="\$listeners"/g, 'v-bind="$attrs"', 'Update :listeners="$listeners" to v-bind="$attrs" - https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html'],
|
|
76
|
-
|
|
77
|
-
// Update $scopedSlots to $slots
|
|
78
|
-
[/\$scopedSlots/g, '$slots', 'Update $scopedSlots to $slots - https://v3-migration.vuejs.org/breaking-changes/slots-unification.html'],
|
|
79
|
-
|
|
80
|
-
// Update slot-scope to v-slot
|
|
81
|
-
[/slot-scope="([^"]+)"/g, 'v-slot="$1"', 'Update slot-scope to v-slot - https://vuejs.org/guide/components/slots.html#scoped-slots'],
|
|
82
|
-
|
|
83
|
-
// Update this.$slots['name'] to this.$slots.name()
|
|
84
|
-
[/this\.\$slots\['([^']+)'\]/g, `this.$slots[\'$1\']()`, `Update this.$slots['name'] to this.$slots.name() - https://vuejs.org/guide/components/slots.html#scoped-slots`],
|
|
85
|
-
|
|
86
|
-
// Remove portal-vue components (now use Teleport)
|
|
87
|
-
[/<\/?portal(-target)?\b[^>]*>/g, '', 'Remove portal components (use Teleport instead) - https://v3.vuejs.org/guide/teleport.html'],
|
|
88
|
-
|
|
89
|
-
// Add :key to <template v-for> elements if missing
|
|
90
|
-
[
|
|
91
|
-
/(<template\b[^>]*v-for="([^"]*)"[^>]*)(>)/g,
|
|
92
|
-
(match, beforeTagEnd, vForContent, tagClose) => vueKeyReplacement(match, beforeTagEnd, vForContent, tagClose),
|
|
93
|
-
'Add :key to <template v-for> elements if missing, using existing variables',
|
|
94
|
-
],
|
|
95
|
-
|
|
96
|
-
// Move :key from child elements to <template v-for>
|
|
97
|
-
[
|
|
98
|
-
/(<template\b[^>]*v-for="[^"]*"[^>]*>)([\s\S]*?)(<\/template>)/g,
|
|
99
|
-
(match, templateStart, templateContent, templateEnd) => vueTemplateKeyReplacement(match, templateStart, templateContent, templateEnd),
|
|
100
|
-
'Move :key from child elements to <template v-for>',
|
|
101
|
-
],
|
|
102
|
-
|
|
103
|
-
// Remove any remaining :key from child elements within <template v-for>
|
|
104
|
-
[
|
|
105
|
-
/(<template\b[^>]*v-for="[^"]*"[^>]*>)([\s\S]*?)(<\/template>)/g,
|
|
106
|
-
(match, templateStart, templateContent, templateEnd) => vueTemplateKeyRemoval(match, templateStart, templateContent, templateEnd),
|
|
107
|
-
'Remove any remaining :key from child elements within <template v-for>',
|
|
108
|
-
],
|
|
109
|
-
|
|
110
|
-
// For other elements with v-for (excluding <template>), ensure :key is present
|
|
111
|
-
[
|
|
112
|
-
/(<(?!template\b)\w+[^>]*v-for="([^"]*)"[^>]*)(>)/g,
|
|
113
|
-
(match, beforeTagEnd, vForContent, tagClose) => vueKeyReplacement(match, beforeTagEnd, vForContent, tagClose),
|
|
114
|
-
'Add :key to elements with v-for that lack it, using existing variables (excluding <template>)',
|
|
115
|
-
],
|
|
116
|
-
|
|
117
|
-
// Update custom directives hooks
|
|
118
|
-
[/\binserted\s*\(/g, 'mounted(', 'Update inserted hook to mounted - https://v3-migration.vuejs.org/breaking-changes/custom-directives.html'],
|
|
119
|
-
[/\bcomponentUpdated\s*\(/g, 'updated(', 'Update componentUpdated hook to updated - https://v3-migration.vuejs.org/breaking-changes/custom-directives.html'],
|
|
120
|
-
[/\bunbind\b/g, 'unmounted', 'Update unbind hook to unmounted - https://v3-migration.vuejs.org/breaking-changes/custom-directives.html'],
|
|
121
|
-
|
|
122
|
-
// Update hook events
|
|
123
|
-
[/@hook:/g, '@vue:', 'Update @hook: events to @vue: - https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html'],
|
|
124
|
-
|
|
125
|
-
// Remove events API ($on, $off, $once)
|
|
126
|
-
[/\$on\(/g, '', 'Remove $on as the events API has been removed - https://v3-migration.vuejs.org/breaking-changes/events-api.html'],
|
|
127
|
-
[/\$off\(/g, '', 'Remove $off as the events API has been removed - https://v3-migration.vuejs.org/breaking-changes/events-api.html'],
|
|
128
|
-
[/\$once\(/g, '', 'Remove $once as the events API has been removed - https://v3-migration.vuejs.org/breaking-changes/events-api.html'],
|
|
129
|
-
|
|
130
|
-
// Update Vuex store creation
|
|
131
|
-
[/new Vuex\.Store\(/g, 'createStore(', 'Update Vuex store creation - https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#installation-process'],
|
|
132
|
-
[/import Vuex from 'vuex'/g, `import { createStore } from 'vuex'`, 'Update Vuex import - https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#installation-process'],
|
|
133
|
-
|
|
134
|
-
// Replace n-link with router-link
|
|
135
|
-
[/<\/?n-link(\s|>)/g, (match) => match.replace('n-link', 'router-link'), 'Replace n-link with router-link'],
|
|
136
|
-
|
|
137
|
-
// Replace v-popover with VDropdown
|
|
138
|
-
[/\bv-popover\b/g, 'VDropdown', 'Replace v-popover with VDropdown'],
|
|
139
|
-
[/<template\s+#popover>/g, '<template #popper>', 'Update slot name from #popover to #popper'],
|
|
140
|
-
|
|
141
|
-
// Extra cases TBD (it seems like we already use the suggested way for arrays)
|
|
142
|
-
// watch option used on arrays not triggered by mutations - https://v3-migration.vuejs.org/breaking-changes/watch.html
|
|
143
|
-
];
|
|
144
|
-
|
|
145
|
-
replaceCases('vueSyntax', files, replacementCases, 'Updating Vue syntax', params);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
module.exports = vueSyntaxUpdates;
|
package/migrate/utils/content.js
DELETED
|
@@ -1,165 +0,0 @@
|
|
|
1
|
-
/* eslint-disable no-console */
|
|
2
|
-
const fs = require('fs');
|
|
3
|
-
const { createPatch } = require('diff');
|
|
4
|
-
const stats = require('../stats');
|
|
5
|
-
const {
|
|
6
|
-
isDry, isSuggest, isVerbose, removePlaceholder
|
|
7
|
-
} = require('../config');
|
|
8
|
-
|
|
9
|
-
const diffOutput = [];
|
|
10
|
-
|
|
11
|
-
function printUsage() {
|
|
12
|
-
console.log(`
|
|
13
|
-
Usage: node index.js [options]
|
|
14
|
-
|
|
15
|
-
Options:
|
|
16
|
-
|
|
17
|
-
--dry Dry Run Mode: Run the script without making any changes to your files.
|
|
18
|
-
--verbose Verbose Output: Enable detailed logging.
|
|
19
|
-
--suggest Suggest Mode: Generate a 'suggested_changes.diff' file with proposed changes.
|
|
20
|
-
--paths=<path> Specify Paths: Limit migration to specific paths or files (accepts glob patterns).
|
|
21
|
-
--ignore=<patterns> Ignore Patterns: Exclude specific files or directories (accepts comma-separated glob patterns).
|
|
22
|
-
--files Output Modified Files: List all files modified during the migration.
|
|
23
|
-
--log Generate Log File: Write detailed migration statistics to 'stats.json'.
|
|
24
|
-
--help, -h Display this help message and exit.
|
|
25
|
-
`);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function writeContent(file, content, originalContent) {
|
|
29
|
-
if (!isDry && !isSuggest) {
|
|
30
|
-
fs.writeFileSync(file, content);
|
|
31
|
-
} else if (isSuggest) {
|
|
32
|
-
if (typeof originalContent === 'undefined') {
|
|
33
|
-
originalContent = fs.readFileSync(file, 'utf8');
|
|
34
|
-
}
|
|
35
|
-
const diff = createPatch(file, originalContent, content, '', '', { context: 3 });
|
|
36
|
-
|
|
37
|
-
if (diff.trim()) {
|
|
38
|
-
diffOutput.push({ file, diff });
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
function printContent(...args) {
|
|
44
|
-
if (isVerbose) {
|
|
45
|
-
console.log(...args);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
function escapeRegExp(string) {
|
|
50
|
-
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function setParams(params) {
|
|
54
|
-
const args = process.argv.slice(2);
|
|
55
|
-
const paramKeys = ['paths', 'ignore'];
|
|
56
|
-
|
|
57
|
-
args.forEach((val) => {
|
|
58
|
-
paramKeys.forEach((key) => {
|
|
59
|
-
if (val.startsWith(`--${ key }=`)) {
|
|
60
|
-
const value = val.split('=')[1];
|
|
61
|
-
|
|
62
|
-
if (key === 'ignore') {
|
|
63
|
-
params.ignorePatterns = value.split(',').map((pattern) => pattern.trim());
|
|
64
|
-
} else {
|
|
65
|
-
params[key] = value;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
// Add user-specified ignore patterns
|
|
72
|
-
if (params.ignorePatterns.length > 0) {
|
|
73
|
-
params.ignore = params.ignore.concat(params.ignorePatterns);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
function printLog() {
|
|
78
|
-
if (process.argv.includes('--files')) {
|
|
79
|
-
console.dir(stats, { compact: true });
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
const statsCount = Object.entries(stats).reduce(
|
|
83
|
-
(acc, [key, value]) => ({
|
|
84
|
-
...acc,
|
|
85
|
-
[key]: value.length,
|
|
86
|
-
}),
|
|
87
|
-
{}
|
|
88
|
-
);
|
|
89
|
-
|
|
90
|
-
console.table(statsCount);
|
|
91
|
-
|
|
92
|
-
if (isSuggest && diffOutput.length > 0) {
|
|
93
|
-
const diffFile = 'suggested_changes.diff';
|
|
94
|
-
let diffContent = '';
|
|
95
|
-
|
|
96
|
-
diffOutput.forEach(({ file, diff }) => {
|
|
97
|
-
diffContent += `--- ${ file }\n+++ ${ file }\n${ diff }\n`;
|
|
98
|
-
});
|
|
99
|
-
|
|
100
|
-
fs.writeFileSync(diffFile, diffContent);
|
|
101
|
-
console.log(`\nSuggested changes have been written to ${ diffFile }`);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
if (process.argv.includes('--log')) {
|
|
105
|
-
fs.writeFileSync('stats.json', JSON.stringify(stats, null, 2));
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
function replaceCases(fileType, files, replacementCases, printText, params) {
|
|
110
|
-
files.forEach((file) => {
|
|
111
|
-
const originalContent = fs.readFileSync(file, 'utf8');
|
|
112
|
-
let content = originalContent;
|
|
113
|
-
const matchedCases = [];
|
|
114
|
-
|
|
115
|
-
replacementCases.forEach(([pattern, replacement, notes]) => {
|
|
116
|
-
let matches = false;
|
|
117
|
-
|
|
118
|
-
if (typeof pattern === 'string') {
|
|
119
|
-
const regex = new RegExp(escapeRegExp(pattern), 'g');
|
|
120
|
-
|
|
121
|
-
if (regex.test(content)) {
|
|
122
|
-
matches = true;
|
|
123
|
-
|
|
124
|
-
// Exclude cases without replacement
|
|
125
|
-
if (replacement) {
|
|
126
|
-
// Remove discontinued functionalities which do not break
|
|
127
|
-
content = content.replace(regex, replacement === removePlaceholder ? '' : replacement);
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
} else if (pattern.test(content)) {
|
|
131
|
-
matches = true;
|
|
132
|
-
|
|
133
|
-
// Exclude cases without replacement
|
|
134
|
-
if (replacement) {
|
|
135
|
-
content = content.replace(pattern, replacement === removePlaceholder ? '' : replacement);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
if (matches) {
|
|
140
|
-
matchedCases.push({
|
|
141
|
-
pattern: pattern.toString(),
|
|
142
|
-
replacement,
|
|
143
|
-
notes,
|
|
144
|
-
});
|
|
145
|
-
}
|
|
146
|
-
});
|
|
147
|
-
|
|
148
|
-
if (matchedCases.length) {
|
|
149
|
-
writeContent(file, content, originalContent);
|
|
150
|
-
printContent(file, printText, matchedCases);
|
|
151
|
-
stats[fileType].push(file);
|
|
152
|
-
stats.total.push(file);
|
|
153
|
-
}
|
|
154
|
-
});
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
module.exports = {
|
|
158
|
-
printUsage,
|
|
159
|
-
writeContent,
|
|
160
|
-
printContent,
|
|
161
|
-
escapeRegExp,
|
|
162
|
-
setParams,
|
|
163
|
-
printLog,
|
|
164
|
-
replaceCases
|
|
165
|
-
};
|
package/migrate/utils/index.js
DELETED
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Vue syntax specific utilities
|
|
3
|
-
*/
|
|
4
|
-
const isSimpleIdentifier = (str) => /^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(str.trim());
|
|
5
|
-
const isBracketedExpression = (str) => str.trim().startsWith('[') && str.trim().endsWith(']');
|
|
6
|
-
const isStringLiteral = (str) => /^['"].*['"]$/.test(str.trim());
|
|
7
|
-
// Extracts the key expression from a v-for directive.
|
|
8
|
-
const extractKeyExpression = (vForContent) => {
|
|
9
|
-
const vForMatch = vForContent.match(/^\s*\(([^,]+),\s*([^)]+)\)\s+in\s+(.*)$/);
|
|
10
|
-
let keyExpression = null;
|
|
11
|
-
|
|
12
|
-
if (vForMatch) {
|
|
13
|
-
// v-for="(item, key) in items"
|
|
14
|
-
keyExpression = vForMatch[2].trim();
|
|
15
|
-
} else {
|
|
16
|
-
const simpleVForMatch = vForContent.match(/^\s*([^\s]+)\s+in\s+(.*)$/);
|
|
17
|
-
|
|
18
|
-
if (simpleVForMatch) {
|
|
19
|
-
// v-for="item in items"
|
|
20
|
-
// Use 'item' as key if it's a simple identifier
|
|
21
|
-
keyExpression = isSimpleIdentifier(simpleVForMatch[1].trim()) ? simpleVForMatch[1].trim() : null;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
return keyExpression;
|
|
26
|
-
};
|
|
27
|
-
// Adds the :key attribute to a tag if it doesn't already have one.
|
|
28
|
-
const addKeyAttribute = (tag, keyExpression) => {
|
|
29
|
-
// Add space if necessary
|
|
30
|
-
const space = tag.endsWith(' ') ? '' : ' ';
|
|
31
|
-
|
|
32
|
-
return `${ tag }${ space }:key="${ keyExpression }"`;
|
|
33
|
-
};
|
|
34
|
-
const vueSetReplacement = (match, obj, prop, val) => {
|
|
35
|
-
prop = prop.trim();
|
|
36
|
-
obj = obj.trim();
|
|
37
|
-
val = val.trim();
|
|
38
|
-
|
|
39
|
-
if (isBracketedExpression(prop)) {
|
|
40
|
-
return `${ obj }${ prop } = ${ val }`;
|
|
41
|
-
} else if (isStringLiteral(prop)) {
|
|
42
|
-
return `${ obj }[${ prop }] = ${ val }`;
|
|
43
|
-
} else if (isSimpleIdentifier(prop)) {
|
|
44
|
-
return `${ obj }.${ prop } = ${ val }`;
|
|
45
|
-
} else {
|
|
46
|
-
return `${ obj }[${ prop }] = ${ val }`;
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
const vueDeleteReplacement = (match, obj, prop) => {
|
|
50
|
-
prop = prop.trim();
|
|
51
|
-
obj = obj.trim();
|
|
52
|
-
|
|
53
|
-
if (isBracketedExpression(prop)) {
|
|
54
|
-
return `delete ${ obj }${ prop }`;
|
|
55
|
-
} else if (isStringLiteral(prop)) {
|
|
56
|
-
return `delete ${ obj }[${ prop }]`;
|
|
57
|
-
} else if (isSimpleIdentifier(prop)) {
|
|
58
|
-
return `delete ${ obj }.${ prop }`;
|
|
59
|
-
} else {
|
|
60
|
-
return `delete ${ obj }[${ prop }]`;
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
const vueKeyReplacement = (match, beforeTagEnd, vForContent, tagClose) => {
|
|
64
|
-
// Check if :key exists in the tag
|
|
65
|
-
if (beforeTagEnd.includes(':key=')) {
|
|
66
|
-
return match; // :key already exists, do not modify
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
const keyExpression = extractKeyExpression(vForContent);
|
|
70
|
-
|
|
71
|
-
if (keyExpression) {
|
|
72
|
-
const updatedTag = addKeyAttribute(beforeTagEnd, keyExpression);
|
|
73
|
-
|
|
74
|
-
return `${ updatedTag }${ tagClose }`;
|
|
75
|
-
} else {
|
|
76
|
-
// Cannot safely determine a key, so do not add one
|
|
77
|
-
return match;
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
const vueTemplateKeyReplacement = (match, templateStart, templateContent, templateEnd) => {
|
|
81
|
-
// Check if :key is on the <template> tag
|
|
82
|
-
const hasKeyOnTemplate = /:key=/.test(templateStart);
|
|
83
|
-
|
|
84
|
-
// Find any :key on direct child elements
|
|
85
|
-
const childWithKeyRegex = /(<\w+[^>]*)(\s+:key="([^"]+)")([^>]*>)/g;
|
|
86
|
-
let updatedContent = templateContent;
|
|
87
|
-
let movedKey = null;
|
|
88
|
-
|
|
89
|
-
updatedContent = updatedContent.replace(childWithKeyRegex, (childMatch, beforeKey, keyAttr, keyValue, afterKey) => {
|
|
90
|
-
if (!hasKeyOnTemplate && !movedKey) {
|
|
91
|
-
// Move the first encountered :key to the template
|
|
92
|
-
movedKey = keyValue;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
// Remove :key from child element
|
|
96
|
-
return `${ beforeKey }${ afterKey }`;
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
if (!hasKeyOnTemplate && movedKey) {
|
|
100
|
-
// Add :key to the <template> tag
|
|
101
|
-
const updatedTemplateStart = `${ addKeyAttribute(templateStart.replace(/>$/, ''), movedKey) }>`;
|
|
102
|
-
|
|
103
|
-
return `${ updatedTemplateStart }${ updatedContent }${ templateEnd }`;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
return `${ templateStart }${ updatedContent }${ templateEnd }`;
|
|
107
|
-
};
|
|
108
|
-
const vueTemplateKeyRemoval = (match, templateStart, templateContent, templateEnd) => {
|
|
109
|
-
const childWithKeyRegex = /(<\w+[^>]*)(\s+:key="[^"]+")([^>]*>)/g;
|
|
110
|
-
const updatedContent = templateContent.replace(childWithKeyRegex, '$1$3');
|
|
111
|
-
|
|
112
|
-
return `${ templateStart }${ updatedContent }${ templateEnd }`;
|
|
113
|
-
};
|
|
114
|
-
|
|
115
|
-
module.exports = {
|
|
116
|
-
isSimpleIdentifier,
|
|
117
|
-
isBracketedExpression,
|
|
118
|
-
isStringLiteral,
|
|
119
|
-
extractKeyExpression,
|
|
120
|
-
addKeyAttribute,
|
|
121
|
-
vueSetReplacement,
|
|
122
|
-
vueDeleteReplacement,
|
|
123
|
-
vueKeyReplacement,
|
|
124
|
-
vueTemplateKeyReplacement,
|
|
125
|
-
vueTemplateKeyRemoval
|
|
126
|
-
};
|