Skip to content
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.

Sign up for GitHub

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

fix(playground): update template generator to support Angular standalone #3983

Merged
merged 4 commits into from
Dec 31, 2024
Merged

fix(playground): update template generator to support Angular standalone #3983

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
26d4428
fix(playground): update template generator to support angular standalone
brandyscarney Dec 30, 2024
8f935df
fix(playground): update react to support multiple lines
brandyscarney Dec 30, 2024
acf0966
Merge branch 'main' into fix-playground-templates
brandyscarney Dec 31, 2024
65d7678
fix(playground): css file should always be included
brandyscarney Dec 31, 2024
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
7 changes: 0 additions & 7 deletions _templates/playground/new/angular.md.ejs.t
View file
Open in desktop

This file was deleted.

6 changes: 6 additions & 0 deletions _templates/playground/new/angular_example_component_html.md.ejs.t
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_html.md` %>"
---
```html
<<%= component %>></<%= component %>>
```
9 changes: 5 additions & 4 deletions _templates/playground/new/angular_example_component_ts.md.ejs.t
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
---
# this file only gets generated if `angular_ts` (from the command line prompt) is true
to: "<%= angular_ts ? `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` : null %>"
arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` %>"
---
```ts
import { Component } from '@angular/core';
import { <%= pascalComponent %> } from '@ionic/angular/standalone';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
<% if (css){ -%>
styleUrls: ['./example.component.css'],
<% } -%>
imports: [<%= pascalComponent %>],
})
export class ExampleComponent {
}
export class ExampleComponent {}
```
5 changes: 0 additions & 5 deletions _templates/playground/new/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,6 @@ module.exports = {
name: 'css',
message: 'Generate custom CSS files?',
},
{
type: 'toggle',
name: 'angular_ts',
message: 'Generate an Angular TypeScript file?',
},
])
.then((answers) => {
answers.name = answers.name || answers.component.replace('ion-', '');
Expand Down
17 changes: 3 additions & 14 deletions _templates/playground/new/index.md.ejs.t
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,12 @@ import react_main_css from './react/main_css.md';
import react from './react.md';
<% } -%>
import vue from './vue.md';
<% if (css || angular_ts){ %>

import angular_example_component_html from './angular/example_component_html.md';
<% } else { -%>
import angular from './angular.md';
<% } -%>
<% if (angular_ts){ -%>
import angular_example_component_ts from './angular/example_component_ts.md';
<% } -%>
<% if (css){ -%>
import angular_example_component_css from './angular/example_component_css.md';
<% } -%>
import angular_example_component_ts from './angular/example_component_ts.md';

<Playground
version="<%= version %>"
Expand All @@ -39,21 +34,15 @@ import angular_example_component_css from './angular/example_component_css.md';
react,
<% } -%>
vue,
<% if (angular_ts || css){ -%>
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
<% if (angular_ts){ -%>
'src/app/example.component.ts': angular_example_component_ts,
<% } -%>
<% if (css){ -%>
'src/app/example.component.css': angular_example_component_css,
<% } -%>
'src/app/example.component.ts': angular_example_component_ts,
},
},
<% } else { -%>
angular,
<% } -%>
}}
src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html"
/>
5 changes: 3 additions & 2 deletions _templates/playground/new/react.md.ejs.t
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ import './main.css';<% } %>

function Example() {
return (
<<%= pascalComponent %>></<%= pascalComponent %>>
<>
<<%= pascalComponent %>></<%= pascalComponent %>>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change was made because running npm run lint after adding a new playground was removing the () but this makes it so it passes lint and supports adding more child components.

</>
);
}
export default Example;
```