Skip to content

Commit 376619c

Browse files
adhamfarragadhamfarrag
committed
feat: pug configuration
1 parent a8e0396 commit 376619c

File tree

8 files changed

+192
-56
lines changed

8 files changed

+192
-56
lines changed

‎package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -467,6 +467,15 @@
467467
"title": "Vue Files",
468468
"type": "object",
469469
"properties": {
470+
"nuxtr.vueFiles.template.defaultLanguage": {
471+
"type": "string",
472+
"default": "html",
473+
"enum": [
474+
"html",
475+
"pug"
476+
],
477+
"description": "Default language for script tag"
478+
},
470479
"nuxtr.vueFiles.firstTag": {
471480
"type": "string",
472481
"default": "template",

‎src/commands/Templates.ts‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { window } from 'vscode'
2+
import { existsSync } from 'fs'
3+
import { projectRootDirectory, runCommand, getInstallationCommand } from '../utils'
4+
import type { TSConfigNuxt } from '../types'
5+
import { writeTSConfig, readTSConfig } from 'pkg-types'
6+
7+
export enum PugConfigurationSteps {
8+
installPug = 'Install Pug',
9+
installLanguagePlugin = 'Install @vue/language-plugin-pug',
10+
addPluginToTSConfig = 'Add @vue/language-plugin-pug to tsconfig.json',
11+
}
12+
13+
14+
export const configurePug = (options: string[]) => {
15+
try {
16+
window
17+
.showQuickPick(options, {
18+
canPickMany: true,
19+
placeHolder: 'Select files to create',
20+
})
21+
.then(async (selections) => {
22+
if (selections !== undefined && selections.length > 0) {
23+
if (selections.includes(PugConfigurationSteps.installPug)) {
24+
const moduleName = 'pug'
25+
const command = await getInstallationCommand(moduleName, true)
26+
27+
await runCommand({
28+
command,
29+
message: 'Installing Pug',
30+
successMessage: 'Pug installed successfully',
31+
errorMessage: 'Pug installation failed',
32+
})
33+
}
34+
35+
if (selections.includes(PugConfigurationSteps.installLanguagePlugin)) {
36+
const moduleName = '@vue/language-plugin-pug'
37+
const command = await getInstallationCommand(moduleName, true)
38+
39+
await runCommand({
40+
command,
41+
message: 'Installing @vue/language-plugin-pug',
42+
successMessage: '@vue/language-plugin-pug installed successfully',
43+
errorMessage: '@vue/language-plugin-pug installation failed',
44+
})
45+
}
46+
47+
if (selections.includes(PugConfigurationSteps.addPluginToTSConfig)) {
48+
const path = `${projectRootDirectory()}/tsconfig.json`;
49+
50+
if (!existsSync(path)) {
51+
return;
52+
}
53+
54+
let tsconfig: TSConfigNuxt = await readTSConfig(path);
55+
tsconfig.vueCompilerOptions = {
56+
plugins: [
57+
'@vue/language-plugin-pug'
58+
]
59+
}
60+
61+
await writeTSConfig(path, tsconfig)
62+
63+
window.showInformationMessage('Pug is added to tsconfig.json')
64+
}
65+
}
66+
})
67+
} catch (error) {
68+
console.error(error)
69+
}
70+
}

‎src/commands/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { openSettings } from '../utils/navigation'
1414
import { upgradePackage, managePackageVersion } from '../utils/dependency'
1515
import { configureCSS } from './CSS'
1616
import { configureLinters } from './Linters'
17+
import { configurePug } from './Templates'
1718
import { createPageTemplate, createLayoutTemplate, createFileFromTemplate, createEmptyFileTemplate } from './FileTemplates'
1819
import { nuxtConfigWatcher, directToggleDevTools } from './Devtools'
1920
import { createUtil, directCreateUtil } from './Util'
@@ -62,6 +63,7 @@ const commands = {
6263
openSettings,
6364
configureCSS,
6465
configureLinters,
66+
configurePug,
6567
createPageTemplate,
6668
createLayoutTemplate,
6769
searchAndInstallDependencies,

‎src/extension.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { logger, updateDependencies } from './utils';
55
import codelens from './codelens'
66
import { statusBars, activateStatusBarIcons } from './statusBar'
77
import { activateIntellisense } from './intellisense'
8-
import {filesWatcher} from './watchers'
8+
import { filesWatcher } from './watchers'
99

1010
const commandList = [
1111
{ command: 'nuxtr.createPage', function: nuxtrCommands.createPage },
@@ -77,12 +77,6 @@ export async function activateExtension(context: ExtensionContext) {
7777
// activate codelens
7878
codelens.activateCodelenses(context)
7979

80-
// activate extension config watcher
81-
// context.subscriptions.push(configWatcher)
82-
83-
// snippetsConfigWatcher
84-
// context.subscriptions.push(snippetsConfigWatcher)
85-
8680
// global state command
8781
context.subscriptions.push(commands.registerCommand('nuxtr.globalState', ({ update, name, value }) => {
8882
if (update) {

‎src/types.d.ts‎

Lines changed: 43 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { TSConfig } from 'pkg-types'
2+
13
export interface ConfigurationProperty {
24
title?: string;
35
description?: string;
@@ -11,42 +13,51 @@ export interface ConfigurationProperty {
1113
}
1214

1315
export interface NuxtrConfiguration {
14-
openItemsAfterCreation: boolean;
15-
defaultPackageManager: "null" | "Yarn" | "NPM" | "pnpm";
16-
monorepoMode: {
17-
DirectoryName: string | null;
18-
};
19-
vueFiles: {
20-
firstTag: "template" | "script";
21-
script: {
22-
type: "setup" | "normal";
23-
defaultLanguage: "js" | "ts";
24-
};
25-
style: {
26-
addStyleTag: boolean;
27-
alwaysScoped: boolean;
28-
defaultLanguage:
29-
| "css"
30-
| "scss"
31-
| "sass"
32-
| "less"
33-
| "stylus"
34-
| "postcss";
16+
openItemsAfterCreation: boolean;
17+
defaultPackageManager: "null" | "Yarn" | "NPM" | "pnpm";
18+
monorepoMode: {
19+
DirectoryName: string | null;
3520
};
36-
pages: {
37-
defaultTemplate: string;
21+
vueFiles: {
22+
template: {
23+
defaultLanguage: "html" | "pug";
24+
}
25+
firstTag: "template" | "script";
26+
script: {
27+
type: "setup" | "normal";
28+
defaultLanguage: "js" | "ts";
29+
};
30+
style: {
31+
addStyleTag: boolean;
32+
alwaysScoped: boolean;
33+
defaultLanguage:
34+
| "css"
35+
| "scss"
36+
| "sass"
37+
| "less"
38+
| "stylus"
39+
| "postcss";
40+
};
41+
pages: {
42+
defaultTemplate: string;
43+
};
44+
layouts: {
45+
defaultTemplate: string;
46+
};
3847
};
39-
layouts: {
40-
defaultTemplate: string;
48+
intellisense: {
49+
vueFiles: boolean;
50+
nuxtignore: boolean;
51+
nuxtrc: boolean;
4152
};
42-
};
43-
intellisense: {
44-
vueFiles: boolean;
45-
nuxtignore: boolean;
46-
nuxtrc: boolean;
47-
};
4853
snippets: {
4954
nuxt: boolean;
5055
nitro: boolean;
51-
}
56+
}
57+
}
58+
59+
interface TSConfigNuxt extends TSConfig {
60+
vueCompilerOptions?: {
61+
plugins?: string[] | undefined;
62+
}
5263
}

‎src/utils/watchers.ts‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
import { workspace, window, commands, ConfigurationChangeEvent, Disposable } from 'vscode';
22

3-
export function createConfigWatcher(configKey: string, callback?: () => Promise<void>): Disposable {
3+
export function createConfigWatcher(configKey: string, callback?: () => Promise<void>, defaultBehavior?: boolean): Disposable {
44
const watcher = workspace.onDidChangeConfiguration(async (event: ConfigurationChangeEvent) => {
55
if (event.affectsConfiguration(configKey)) {
66
// Execute the provided callback when the configuration changes.
77
if (callback && typeof callback === 'function') {
88
await callback();
99
}
1010

11-
const question = window.showInformationMessage(
12-
`Nuxtr configuration updated.`,
13-
'Reload Window'
14-
);
11+
if (defaultBehavior) {
12+
const question = window.showInformationMessage(
13+
`Nuxtr configuration updated.`,
14+
'Reload Window'
15+
);
1516

16-
question.then((answer) => {
17-
if (answer === 'Reload Window') {
18-
commands.executeCommand('workbench.action.reloadWindow');
17+
question.then((answer) => {
18+
if (answer === 'Reload Window') {
19+
commands.executeCommand('workbench.action.reloadWindow');
1920

20-
}
21-
});
21+
}
22+
});
23+
}
2224
}
2325
});
2426

‎src/watchers/config.ts‎

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,58 @@
1-
import { Disposable } from 'vscode';
2-
import { createConfigWatcher, getConfiguration } from '../utils';
1+
import { Disposable, window } from 'vscode';
2+
import { createConfigWatcher, getConfiguration, getProjectDependencies, projectRootDirectory } from '../utils';
3+
import { existsSync } from 'fs';
34
import { toggleSnippets } from '../snippets';
5+
import { TSConfigNuxt } from '../types';
6+
import { readTSConfig } from 'pkg-types'
7+
import nuxtrCommands from '../commands'
8+
import { PugConfigurationSteps } from '../commands/Templates'
49

5-
const snippetsConfig = getConfiguration().snippets
10+
11+
const watcherDefaultBehavior = false
12+
const dependencies = getProjectDependencies() as unknown as Array<string>;
613

714
export const snippetsConfigWatcher: Disposable = createConfigWatcher('nuxtr.snippets', async () => {
8-
console.log('snippets', snippetsConfig);
15+
console.log('snippets', getConfiguration().snippets);
916
await toggleSnippets()
1017
return Promise.resolve();
1118
});
19+
20+
export const templatesConfigWatcher: Disposable = createConfigWatcher('nuxtr.vueFiles.template.defaultLanguage', async () => {
21+
const options: string[] = [];
22+
23+
if (getConfiguration().vueFiles.template.defaultLanguage === 'pug') {
24+
25+
26+
if (!dependencies.includes('pug')) {
27+
options.push(PugConfigurationSteps.installPug)
28+
}
29+
30+
if (!dependencies.includes('@vue/language-plugin-pug')) {
31+
options.push(PugConfigurationSteps.installLanguagePlugin)
32+
}
33+
34+
const path = `${projectRootDirectory()}/tsconfig.json`;
35+
let tsconfig: TSConfigNuxt = await readTSConfig(path);
36+
37+
if (!existsSync(path)) {
38+
return;
39+
}
40+
41+
const vueCompilerPlugins: string[] = tsconfig.vueCompilerOptions?.plugins ?? [];
42+
if (!vueCompilerPlugins.includes('@vue/language-plugin-pug')) {
43+
options.push(PugConfigurationSteps.addPluginToTSConfig)
44+
}
45+
46+
47+
if (options.length > 0) {
48+
const question = window.showInformationMessage('Pug is not configured properly', 'Configure Pug')
49+
question.then((answer) => {
50+
if (answer === 'Configure Pug') {
51+
nuxtrCommands.configurePug(options);
52+
}
53+
})
54+
55+
56+
}
57+
}
58+
});

‎src/watchers/index.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import filesWatcher from './files'
2-
import { snippetsConfigWatcher } from './config'
2+
import { snippetsConfigWatcher, templatesConfigWatcher } from './config'
33

4-
export {
4+
export {
55
filesWatcher,
6-
snippetsConfigWatcher
6+
snippetsConfigWatcher,
7+
templatesConfigWatcher
78
}

0 commit comments

Comments
 (0)