Skip to content

Commit 601b74d

Browse files
jaysoojaysoo
authoredOct 4, 2023
feat(vue): update generated file setup for apps (#19428)
·
v17.0.616.10.0-beta.0
1 parent dd50756 commit 601b74d

16 files changed

+61
-121
lines changed
 

‎packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap

+4-17
Original file line numberDiff line numberDiff line change
@@ -177,20 +177,7 @@ exports[`application generator should set up project correctly with given option
177177
"
178178
`;
179179

180-
exports[`application generator should set up project correctly with given options 5`] = `
181-
"import { describe, it, expect } from 'vitest';
182-
183-
import { mount } from '@vue/test-utils';
184-
import App from '../App.vue';
185-
186-
describe('App', () => {
187-
it('renders properly', () => {
188-
const wrapper = mount(App, {});
189-
expect(wrapper.text()).toContain('Welcome test 👋');
190-
});
191-
});
192-
"
193-
`;
180+
exports[`application generator should set up project correctly with given options 5`] = `null`;
194181

195182
exports[`application generator should set up project correctly with given options 6`] = `
196183
[
@@ -212,9 +199,9 @@ exports[`application generator should set up project correctly with given option
212199
"test/.eslintrc.json",
213200
"test/index.html",
214201
"test/project.json",
215-
"test/src/__tests__/App.spec.ts",
216-
"test/src/App.vue",
217-
"test/src/components/NxWelcome.vue",
202+
"test/src/app/App.spec.ts",
203+
"test/src/app/App.vue",
204+
"test/src/app/NxWelcome.vue",
218205
"test/src/main.ts",
219206
"test/src/styles.css",
220207
"test/tsconfig.app.json",

‎packages/vue/src/generators/application/files/common/src/__tests__/App.spec.ts.template ‎packages/vue/src/generators/application/files/common/src/app/App.spec.ts.template

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { describe, it, expect } from 'vitest'
33
<% } %>
44
import { mount } from '@vue/test-utils'
5-
import App from '../App.vue';
5+
import App from './App.vue';
66

77
describe('App', () => {
88
it('renders properly', () => {

‎packages/vue/src/generators/application/files/common/src/App.vue.template ‎packages/vue/src/generators/application/files/common/src/app/App.vue.template

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang="ts">
22
<% if (routing) { %>
33
import { RouterLink, RouterView } from 'vue-router';
4+
<% } else { %>
5+
import NxWelcome from './NxWelcome.vue';
46
<% } %>
5-
import NxWelcome from './components/NxWelcome.vue';
67
</script>
78

89
<template>

‎packages/vue/src/generators/application/files/common/src/main.ts.template

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import router from './router';
66
<% } %>
77

88
import { createApp } from 'vue';
9-
import App from './App.vue';
9+
import App from './app/App.vue';
1010

1111
const app = createApp(App);
1212
<% if (routing) { %>

‎packages/vue/src/generators/application/files/routing/src/views/HomeView.vue.template

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import NxWelcome from '../components/NxWelcome.vue'
2+
import NxWelcome from '../app/NxWelcome.vue'
33
</script>
44

55
<template>

‎packages/vue/src/generators/component/__snapshots__/component.spec.ts.snap

+6-18
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,16 @@ defineProps<{}>();
1111
</script>
1212
1313
<template>
14-
<div>
15-
<p>Welcome to Hello!</p>
16-
</div>
14+
<p>Welcome to Hello!</p>
1715
</template>
1816
19-
<style scoped>
20-
div {
21-
color: pink;
22-
}
23-
</style>
17+
<style scoped></style>
2418
"
2519
`;
2620

2721
exports[`component should generate files with jest 2`] = `
2822
"import { mount } from '@vue/test-utils';
29-
import Hello from '../hello.vue';
23+
import Hello from './hello.vue';
3024
3125
describe('Hello', () => {
3226
it('renders properly', () => {
@@ -43,24 +37,18 @@ defineProps<{}>();
4337
</script>
4438
4539
<template>
46-
<div>
47-
<p>Welcome to Hello!</p>
48-
</div>
40+
<p>Welcome to Hello!</p>
4941
</template>
5042
51-
<style scoped>
52-
div {
53-
color: pink;
54-
}
55-
</style>
43+
<style scoped></style>
5644
"
5745
`;
5846

5947
exports[`component should generate files with vitest 2`] = `
6048
"import { describe, it, expect } from 'vitest';
6149
6250
import { mount } from '@vue/test-utils';
63-
import Hello from '../hello.vue';
51+
import Hello from './hello.vue';
6452
6553
describe('Hello', () => {
6654
it('renders properly', () => {

‎packages/vue/src/generators/component/component.spec.ts

+6-14
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { logger, readJson, Tree } from '@nx/devkit';
1+
import { logger, Tree } from '@nx/devkit';
22
import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
33
import { componentGenerator } from './component';
44
import { createLib } from '../../utils/test-utils';
@@ -30,17 +30,14 @@ describe('component', () => {
3030
appTree.exists('my-lib/src/components/hello/hello.vue')
3131
).toBeTruthy();
3232
expect(
33-
appTree.exists('my-lib/src/components/hello/__tests__/hello.spec.ts')
33+
appTree.exists('my-lib/src/components/hello/hello.spec.ts')
3434
).toBeTruthy();
3535

3636
expect(
3737
appTree.read('my-lib/src/components/hello/hello.vue', 'utf-8')
3838
).toMatchSnapshot();
3939
expect(
40-
appTree.read(
41-
'my-lib/src/components/hello/__tests__/hello.spec.ts',
42-
'utf-8'
43-
)
40+
appTree.read('my-lib/src/components/hello/hello.spec.ts', 'utf-8')
4441
).toMatchSnapshot();
4542
});
4643

@@ -55,10 +52,7 @@ describe('component', () => {
5552
appTree.read('my-lib/src/components/hello/hello.vue', 'utf-8')
5653
).toMatchSnapshot();
5754
expect(
58-
appTree.read(
59-
'my-lib/src/components/hello/__tests__/hello.spec.ts',
60-
'utf-8'
61-
)
55+
appTree.read('my-lib/src/components/hello/hello.spec.ts', 'utf-8')
6256
).toMatchSnapshot();
6357
});
6458

@@ -114,7 +108,7 @@ describe('component', () => {
114108
appTree.exists('my-lib/src/components/hello/Hello.vue')
115109
).toBeTruthy();
116110
expect(
117-
appTree.exists('my-lib/src/components/hello/__tests__/Hello.spec.ts')
111+
appTree.exists('my-lib/src/components/hello/Hello.spec.ts')
118112
).toBeTruthy();
119113
});
120114
});
@@ -131,9 +125,7 @@ describe('component', () => {
131125
appTree.exists('my-lib/src/components/HelloWorld/HelloWorld.vue')
132126
).toBeTruthy();
133127
expect(
134-
appTree.exists(
135-
'my-lib/src/components/HelloWorld/__tests__/HelloWorld.spec.ts'
136-
)
128+
appTree.exists('my-lib/src/components/HelloWorld/HelloWorld.spec.ts')
137129
).toBeTruthy();
138130
});
139131
});

‎packages/vue/src/generators/component/files/__tests__/__fileName__.spec.ts__tmpl__ ‎packages/vue/src/generators/component/files/__fileName__.spec.ts__tmpl__

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { describe, it, expect } from 'vitest'
33
<% } %>
44

55
import { mount } from '@vue/test-utils'
6-
import <%= className %> from '../<%= fileName %>.vue';
6+
import <%= className %> from './<%= fileName %>.vue';
77

88
describe('<%= className %>', () => {
99
it('renders properly', () => {

‎packages/vue/src/generators/component/files/__fileName__.vue__tmpl__

+2-7
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,8 @@ defineProps<{}>()
33
</script>
44

55
<template>
6-
<div>
7-
<p>Welcome to <%= className %>!</p>
8-
</div>
6+
<p>Welcome to <%= className %>!</p>
97
</template>
108

119
<style scoped>
12-
div {
13-
color: pink;
14-
}
15-
</style>
10+
</style>

‎packages/vue/src/generators/library/library.spec.ts

+2-6
Original file line numberDiff line numberDiff line change
@@ -163,9 +163,7 @@ describe('lib', () => {
163163
expect(tree.exists('my-lib/package.json')).toBeFalsy();
164164
expect(tree.exists('my-lib/src/index.ts')).toBeTruthy();
165165
expect(tree.exists('my-lib/src/components/my-lib.vue')).toBeTruthy();
166-
expect(
167-
tree.exists('my-lib/src/components/__tests__/my-lib.spec.ts')
168-
).toBeTruthy();
166+
expect(tree.exists('my-lib/src/components/my-lib.spec.ts')).toBeTruthy();
169167
const eslintJson = readJson(tree, 'my-lib/.eslintrc.json');
170168
expect(eslintJson).toMatchSnapshot();
171169
});
@@ -206,9 +204,7 @@ describe('lib', () => {
206204
tree.exists('my-dir/my-lib/src/components/my-dir-my-lib.vue')
207205
).toBeTruthy();
208206
expect(
209-
tree.exists(
210-
'my-dir/my-lib/src/components/__tests__/my-dir-my-lib.spec.ts'
211-
)
207+
tree.exists('my-dir/my-lib/src/components/my-dir-my-lib.spec.ts')
212208
).toBeTruthy();
213209
});
214210

‎packages/vue/src/generators/stories/lib/component-story.spec.ts

+2-12
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,10 @@ describe('vue:component-story', () => {
4444
</script>
4545
4646
<template>
47-
<div>
48-
<p>Welcome to Vlv!</p>
49-
</div>
47+
<p>Welcome to Vlv!</p>
5048
</template>
5149
5250
<style scoped>
53-
div {
54-
color: pink;
55-
}
5651
</style>
5752
`
5853
);
@@ -88,15 +83,10 @@ describe('vue:component-story', () => {
8883
</script>
8984
9085
<template>
91-
<div>
92-
<p>Welcome to Vlv!</p>
93-
</div>
86+
<p>Welcome to Vlv!</p>
9487
</template>
9588
9689
<style scoped>
97-
div {
98-
color: pink;
99-
}
10090
</style>
10191
`
10292
);

‎packages/vue/src/generators/stories/stories.app.spec.ts

+10-15
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,10 @@ defineProps<{
1313
</script>
1414
1515
<template>
16-
<div>
17-
<p>Welcome to Vlv!</p>
18-
</div>
16+
<p>Welcome to Vlv!</p>
1917
</template>
2018
2119
<style scoped>
22-
div {
23-
color: pink;
24-
}
2520
</style>
2621
`;
2722

@@ -44,7 +39,7 @@ describe('vue:stories for applications', () => {
4439
});
4540

4641
expect(
47-
appTree.read('test-ui-app/src/components/NxWelcome.stories.ts', 'utf-8')
42+
appTree.read('test-ui-app/src/app/NxWelcome.stories.ts', 'utf-8')
4843
).toMatchSnapshot();
4944
expect(
5045
appTree.read(
@@ -61,7 +56,7 @@ describe('vue:stories for applications', () => {
6156
});
6257

6358
expect(
64-
appTree.read('test-ui-app/src/components/NxWelcome.stories.ts', 'utf-8')
59+
appTree.read('test-ui-app/src/app/NxWelcome.stories.ts', 'utf-8')
6560
).toMatchSnapshot();
6661
expect(
6762
appTree.read(
@@ -73,7 +68,7 @@ describe('vue:stories for applications', () => {
7368

7469
it('should not update existing stories', async () => {
7570
appTree.write(
76-
'test-ui-app/src/components/NxWelcome.stories.ts',
71+
'test-ui-app/src/app/NxWelcome.stories.ts',
7772
`import { ComponentStory, ComponentMeta } from '@storybook/vue3'`
7873
);
7974

@@ -82,7 +77,7 @@ describe('vue:stories for applications', () => {
8277
});
8378

8479
expect(
85-
appTree.read('test-ui-app/src/components/NxWelcome.stories.ts', 'utf-8')
80+
appTree.read('test-ui-app/src/app/NxWelcome.stories.ts', 'utf-8')
8681
).toMatchSnapshot();
8782
});
8883

@@ -104,7 +99,7 @@ describe('vue:stories for applications', () => {
10499
});
105100

106101
expect(
107-
appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
102+
appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
108103
).toBeTruthy();
109104
expect(
110105
appTree.exists(
@@ -135,7 +130,7 @@ describe('vue:stories for applications', () => {
135130
});
136131

137132
expect(
138-
appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
133+
appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
139134
).toBeTruthy();
140135
expect(
141136
appTree.exists(
@@ -166,7 +161,7 @@ describe('vue:stories for applications', () => {
166161
});
167162

168163
expect(
169-
appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
164+
appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
170165
).toBeTruthy();
171166
expect(
172167
appTree.exists(
@@ -194,7 +189,7 @@ describe('vue:stories for applications', () => {
194189
});
195190

196191
expect(
197-
appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
192+
appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
198193
).toBeTruthy();
199194
expect(
200195
appTree.exists(
@@ -229,7 +224,7 @@ describe('vue:stories for applications', () => {
229224
});
230225

231226
expect(
232-
appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
227+
appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
233228
).toBeTruthy();
234229
expect(
235230
appTree.exists(

‎packages/vue/src/generators/stories/stories.lib.spec.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,10 @@ defineProps<{
1313
</script>
1414
1515
<template>
16-
<div>
17-
<p>Welcome to Vlv!</p>
18-
</div>
16+
<p>Welcome to Vlv!</p>
1917
</template>
2018
2119
<style scoped>
22-
div {
23-
color: pink;
24-
}
2520
</style>
2621
`;
2722

‎packages/vue/src/generators/stories/stories.ts

+21-15
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import {
1212
visitNotIgnoredFiles,
1313
} from '@nx/devkit';
1414
import { basename, join } from 'path';
15-
import minimatch = require('minimatch');
1615
import { nxVersion } from '../../utils/versions';
1716
import { createComponentStories } from './lib/component-story';
17+
import minimatch = require('minimatch');
1818

1919
export interface StorybookStoriesSchema {
2020
project: string;
@@ -36,22 +36,28 @@ export async function createAllStories(
3636
) {
3737
const { sourceRoot, root } = projectConfiguration;
3838
let componentPaths: string[] = [];
39-
const projectPath = joinPathFragments(sourceRoot, 'components');
40-
visitNotIgnoredFiles(tree, projectPath, (path) => {
41-
// Ignore private files starting with "_".
42-
if (basename(path).startsWith('_')) return;
43-
if (ignorePaths?.some((pattern) => minimatch(path, pattern))) return;
44-
if (path.endsWith('.vue')) {
45-
// Let's see if the .stories.* file exists
46-
const ext = path.slice(path.lastIndexOf('.'));
47-
const storyPathJs = `${path.split(ext)[0]}.stories.js`;
48-
const storyPathTs = `${path.split(ext)[0]}.stories.ts`;
39+
const pathsToCheck = [
40+
joinPathFragments(sourceRoot, 'app'), // Default component folder for apps
41+
joinPathFragments(sourceRoot, 'components'), // Additional component folder
42+
];
4943

50-
if (!tree.exists(storyPathJs) && !tree.exists(storyPathTs)) {
51-
componentPaths.push(path);
44+
for (const p of pathsToCheck) {
45+
visitNotIgnoredFiles(tree, p, (path) => {
46+
// Ignore private files starting with "_".
47+
if (basename(path).startsWith('_')) return;
48+
if (ignorePaths?.some((pattern) => minimatch(path, pattern))) return;
49+
if (path.endsWith('.vue')) {
50+
// Let's see if the .stories.* file exists
51+
const ext = path.slice(path.lastIndexOf('.'));
52+
const storyPathJs = `${path.split(ext)[0]}.stories.js`;
53+
const storyPathTs = `${path.split(ext)[0]}.stories.ts`;
54+
55+
if (!tree.exists(storyPathJs) && !tree.exists(storyPathTs)) {
56+
componentPaths.push(path);
57+
}
5258
}
53-
}
54-
});
59+
});
60+
}
5561

5662
await Promise.all(
5763
componentPaths.map(async (componentPath) => {

‎packages/vue/src/generators/storybook-configuration/configuration.spec.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,10 @@ defineProps<{
2222
</script>
2323
2424
<template>
25-
<div>
26-
<p>Welcome to Vlv!</p>
27-
</div>
25+
<p>Welcome to Vlv!</p>
2826
</template>
2927
3028
<style scoped>
31-
div {
32-
color: pink;
33-
}
3429
</style>
3530
`;
3631

0 commit comments

Comments
 (0)
Please sign in to comment.