Skip to content

feat: add svelte support #5418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 17, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 25 additions & 2 deletions lib/commands/create-project.ts
Original file line number Diff line number Diff line change
@@ -44,11 +44,12 @@ export class CreateProjectCommand implements ICommand {
this.$options.ng ||
this.$options.vue ||
this.$options.react ||
this.$options.svelte ||
this.$options.js) &&
this.$options.template
) {
this.$errors.failWithHelp(
"You cannot use a flavor option like --ng, --vue, --react, --tsc and --js together with --template."
"You cannot use a flavor option like --ng, --vue, --react, --svelte, --tsc and --js together with --template."
);
}

@@ -64,6 +65,8 @@ export class CreateProjectCommand implements ICommand {
selectedTemplate = constants.VUE_NAME;
} else if (this.$options.react) {
selectedTemplate = constants.REACT_NAME;
} else if (this.$options.svelte) {
selectedTemplate = constants.SVELTE_NAME;
} else {
selectedTemplate = this.$options.template;
}
@@ -132,6 +135,10 @@ export class CreateProjectCommand implements ICommand {
key: constants.VueFlavorName,
description: "Learn more at https://nativescript.org/vue",
},
{
key: constants.SvelteFlavorName,
description: "Learn more at https://svelte-native.technology",
},
{
key: constants.TsFlavorName,
description: "Learn more at https://nativescript.org/typescript",
@@ -152,7 +159,7 @@ export class CreateProjectCommand implements ICommand {
this.$logger.printMarkdown(`# Let’s create a NativeScript app!`);
this.$logger.printMarkdown(`
Answer the following questions to help us build the right app for you. (Note: you
can skip this prompt next time using the --template option, or the --ng, --react, --vue, --ts, or --js flags.)
can skip this prompt next time using the --template option, or the --ng, --react, --vue, --svelte, --ts, or --js flags.)
`);
}
}
@@ -180,6 +187,10 @@ can skip this prompt next time using the --template option, or the --ng, --react
selectedFlavorTemplates.push(...this.getVueTemplates());
break;
}
case constants.SvelteFlavorName: {
selectedFlavorTemplates.push(...this.getSvelteTemplates());
break;
}
case constants.TsFlavorName: {
selectedFlavorTemplates.push(...this.getTsTemplates());
break;
@@ -285,6 +296,18 @@ can skip this prompt next time using the --template option, or the --ng, --react
return templates;
}

private getSvelteTemplates() {
const templates = [
{
key: CreateProjectCommand.HelloWorldTemplateKey,
value: constants.RESERVED_TEMPLATE_NAMES.svelte,
description: CreateProjectCommand.HelloWorldTemplateDescription,
},
];

return templates;
}

private getVueTemplates() {
const templates = [
{
3 changes: 3 additions & 0 deletions lib/constants.ts
Original file line number Diff line number Diff line change
@@ -138,6 +138,7 @@ export const RESERVED_TEMPLATE_NAMES: IStringDictionary = {
angular: "@nativescript/template-hello-world-ng",
react: "@nativescript/template-blank-react",
reactjs: "@nativescript/template-blank-react",
svelte: "@nativescript/template-blank-svelte",
};

export const ANALYTICS_LOCAL_TEMPLATE_PREFIX = "localTemplate_";
@@ -167,9 +168,11 @@ export const ANGULAR_NAME = "angular";
export const JAVASCRIPT_NAME = "javascript";
export const TYPESCRIPT_NAME = "typescript";
export const REACT_NAME = "react";
export const SVELTE_NAME = "svelte";
export const NgFlavorName = "Angular";
export const VueFlavorName = "Vue.js";
export const ReactFlavorName = "React";
export const SvelteFlavorName = "Svelte";
export const TsFlavorName = "Plain TypeScript";
export const JsFlavorName = "Plain JavaScript";
export class ProjectTypes {
1 change: 1 addition & 0 deletions lib/declarations.d.ts
Original file line number Diff line number Diff line change
@@ -658,6 +658,7 @@ interface IOptions
ng: boolean;
angular: boolean;
react: boolean;
svelte: boolean;
vue: boolean;
vuejs: boolean;
js: boolean;
1 change: 1 addition & 0 deletions lib/options.ts
Original file line number Diff line number Diff line change
@@ -129,6 +129,7 @@ export class Options {
reactjs: { type: OptionType.Boolean, hasSensitiveValue: false },
vue: { type: OptionType.Boolean, hasSensitiveValue: false },
vuejs: { type: OptionType.Boolean, hasSensitiveValue: false },
svelte: { type: OptionType.Boolean, hasSensitiveValue: false },
tsc: { type: OptionType.Boolean, hasSensitiveValue: false },
ts: { type: OptionType.Boolean, hasSensitiveValue: false },
typescript: { type: OptionType.Boolean, hasSensitiveValue: false },
40 changes: 40 additions & 0 deletions test/project-commands.ts
Original file line number Diff line number Diff line change
@@ -32,6 +32,10 @@ const expectedFlavorChoices = [
"Learn more at https://github.com/shirakaba/react-nativescript",
},
{ key: "Vue.js", description: "Learn more at https://nativescript.org/vue" },
{
key: "Svelte",
description: "Learn more at https://svelte-native.technology",
},
{
key: "Plain TypeScript",
description: "Learn more at https://nativescript.org/typescript",
@@ -188,6 +192,16 @@ describe("Project commands tests", () => {
assert.isTrue(createProjectCalledWithForce);
});

it("should not fail when using only --svelte.", async () => {
options.svelte = true;

await createProjectCommand.execute(dummyArgs);

assert.isTrue(isProjectCreated);
assert.equal(validateProjectCallsCount, 1);
assert.isTrue(createProjectCalledWithForce);
});

it("should not fail when using only --tsc.", async () => {
options.tsc = true;

@@ -228,6 +242,16 @@ describe("Project commands tests", () => {
assert.isTrue(createProjectCalledWithForce);
});

it("should set the template name correctly when used --svelte.", async () => {
options.svelte = true;

await createProjectCommand.execute(dummyArgs);

assert.deepStrictEqual(selectedTemplateName, constants.SVELTE_NAME);
assert.equal(validateProjectCallsCount, 1);
assert.isTrue(createProjectCalledWithForce);
});

it("should set the template name correctly when used --tsc.", async () => {
options.tsc = true;

@@ -331,5 +355,21 @@ describe("Project commands tests", () => {
assert.equal(validateProjectCallsCount, 1);
assert.isTrue(createProjectCalledWithForce);
});

it("should ask for a template when svelte flavor is selected.", async () => {
setupAnswers({
flavorAnswer: constants.SvelteFlavorName,
templateAnswer: "Hello World",
});

await createProjectCommand.execute(dummyArgs);

assert.deepStrictEqual(
selectedTemplateName,
"@nativescript/template-blank-svelte"
);
assert.equal(validateProjectCallsCount, 1);
assert.isTrue(createProjectCalledWithForce);
});
});
});