Skip to content

Commit 80c5a8b

Browse files
ammarahm-edammarahm-ed
authored
feat: solid-js templates with TS option as well (#235)
1 parent 8211992 commit 80c5a8b

35 files changed

+7359
-98
lines changed

‎packages/template-blank-solid-ts/.gitignore

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# NativeScript
2+
hooks/
3+
node_modules/
4+
platforms/
5+
6+
# Logs
7+
logs
8+
*.log
9+
npm-debug.log*
10+
yarn-debug.log*
11+
yarn-error.log*
12+
13+
# General
14+
.DS_Store
15+
.AppleDouble
16+
.LSOverride
17+
.idea
18+
.cloud
19+
.project
20+
tmp/
21+
typings/
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json

‎packages/template-blank-solid-ts/.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
legacy-peer-deps=true

‎packages/template-blank-solid-ts/README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# NativeScript with Solid Blank Template
2+
App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.
3+
4+
## Quick Start
5+
Execute the following command to create an app from this template:
6+
7+
```
8+
ns create my-blank-solid --template @nativescript/template-blank-solid
9+
```
10+
11+
> Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm](https://www.npmjs.com/package/@nativescript/template-blank-solid).
12+
13+
If you want to create a new app that uses the source of the template from the `main` branch, you can execute the following:
14+
15+
```
16+
# clone nativescript-app-templates monorepo locally
17+
git clone [email protected]:NativeScript/nativescript-app-templates.git
18+
19+
# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
20+
ns create my-blank-solid --template nativescript-app-templates/packages/template-blank-solid
21+
```
22+
23+
**NB:** Please, have in mind that the main branch may refer to dependencies that are not on NPM yet!
24+
25+
## Get Help
26+
The NativeScript framework has a vibrant community that can help when you run into problems.
27+
28+
Try [joining the NativeScript community Discord](https://nativescript.org/discord). The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.
29+
30+
If you have found an issue with this template, please report the problem in the [NativeScript repository](https://github.com/NativeScript/NativeScript/issues).
31+
32+
## Contributing
33+
34+
We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

‎packages/template-blank-solid-ts/app/app.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.fab {
2+
font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
3+
font-weight: 400;
4+
}
5+
6+
.fas {
7+
font-family: 'Font Awesome 5 Free', 'fa-solid-900';
8+
font-weight: 900;
9+
}
10+
11+
.far {
12+
font-family: 'Font Awesome 5 Free', 'fa-regular-400';
13+
font-weight: 400;
14+
}
15+

‎packages/template-blank-solid-ts/app/app.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Route, RouteDefinition, StackRouter } from 'solid-navigation'
2+
import Home from './components/home'
3+
4+
declare module 'solid-navigation' {
5+
export interface Routers {
6+
Default: {
7+
Home: RouteDefinition
8+
}
9+
}
10+
}
11+
12+
const App = () => {
13+
return (
14+
<StackRouter initialRouteName="Home">
15+
<Route name="Home" component={Home} />
16+
</StackRouter>
17+
)
18+
}
19+
20+
export { App }

‎packages/template-blank-solid-ts/app/components/home.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { useRoute } from 'solid-navigation';
2+
3+
export default function Home() {
4+
const route = useRoute();
5+
const message = 'Blank SolidJS App'
6+
7+
return (
8+
<>
9+
<actionbar title={route.name} />
10+
<gridlayout>
11+
<label
12+
style={{
13+
fontSize: 20,
14+
horizontalAlignment: 'center',
15+
verticalAlignment: 'middle',
16+
}}
17+
>
18+
<formattedstring>
19+
<span
20+
className="fas"
21+
text={String.fromCharCode(0xf135)}
22+
style={{
23+
color: '#3A53FF',
24+
}}
25+
/>
26+
<span text={` ${message}`} />
27+
</formattedstring>
28+
</label>
29+
</gridlayout>
30+
</>
31+
)
32+
}

‎packages/template-blank-solid-ts/app/fonts/LICENSE.txt

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
Font Awesome Free License
2+
-------------------------
3+
4+
Font Awesome Free is free, open source, and GPL friendly. You can use it for
5+
commercial projects, open source projects, or really almost whatever you want.
6+
Full Font Awesome Free license: https://fontawesome.com/license/free.
7+
8+
# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
9+
In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
10+
packaged as SVG and JS file types.
11+
12+
# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
13+
In the Font Awesome Free download, the SIL OFL license applies to all icons
14+
packaged as web and desktop font files.
15+
16+
# Code: MIT License (https://opensource.org/licenses/MIT)
17+
In the Font Awesome Free download, the MIT license applies to all non-font and
18+
non-icon files.
19+
20+
# Attribution
21+
Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
22+
Awesome Free files already contain embedded comments with sufficient
23+
attribution, so you shouldn't need to do anything additional when using these
24+
files normally.
25+
26+
We've kept attribution comments terse, so we ask that you do not actively work
27+
to remove them from files, especially code. They're a great way for folks to
28+
learn about Font Awesome.
29+
30+
# Brand Icons
31+
All brand icons are trademarks of their respective owners. The use of these
32+
trademarks does not indicate endorsement of the trademark holder by Font
33+
Awesome, nor vice versa. **Please do not use brand logos for any purpose except
34+
to represent the company, product, or service to which they refer.**

‎packages/template-blank-solid-ts/app/fonts/fa-brands-400.ttf

128 KB
Binary file not shown.

‎packages/template-blank-solid-ts/app/fonts/fa-regular-400.ttf

33.3 KB
Binary file not shown.

‎packages/template-blank-solid-ts/app/fonts/fa-solid-900.ttf

188 KB
Binary file not shown.

‎packages/template-blank-solid-ts/app/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Application } from '@nativescript/core';
2+
import { render } from '@nativescript-community/solid-js'
3+
import { App } from './app'
4+
5+
Application.run({
6+
create: () => {
7+
document.body.actionBarHidden = true;
8+
render(() => <App />, document.body)
9+
return document;
10+
},
11+
})

‎packages/template-blank-solid-ts/package.json

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
{
2+
"name": "@nativescript/template-blank-solid-ts",
3+
"main": "app/index.js",
4+
"version": "8.8.1",
5+
"description": "Nativescript Starter with Solid",
6+
"author": "NativeScript Team <[email protected]>",
7+
"license": "Apache-2.0",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/NativeScript/nativescript-app-templates"
11+
},
12+
"homepage": "https://github.com/NativeScript/nativescript-app-templates",
13+
"bugs": {
14+
"url": "https://github.com/NativeScript/NativeScript/issues"
15+
},
16+
"publishConfig": {
17+
"access": "public"
18+
},
19+
"files": [
20+
"src",
21+
"App_Resources",
22+
"hooks",
23+
"tools",
24+
"!tools/assets",
25+
"patches",
26+
"types",
27+
".editorconfig",
28+
".npmrc",
29+
"tailwind.config.js",
30+
"tsconfig.json",
31+
"webpack.config.js"
32+
],
33+
"keywords": [
34+
"nativescript",
35+
"mobile",
36+
"{N}",
37+
"solid",
38+
"solidjs"
39+
],
40+
"scripts": {},
41+
"dependencies": {
42+
"@nativescript-community/solid-js": "^0.0.6",
43+
"@nativescript/core": "~8.8.0",
44+
"dominative": "^0.1.3",
45+
"solid-js": "^1.8.21",
46+
"solid-navigation": "1.0.0-alpha.16",
47+
"undom-ng": "^1.1.2"
48+
},
49+
"devDependencies": {
50+
"@babel/core": "^7.24.4",
51+
"@babel/preset-env": "^7.24.4",
52+
"@babel/preset-typescript": "^7.24.1",
53+
"@nativescript-dom/core-types": "1.0.29",
54+
"@nativescript-dom/solidjs-types": "1.0.23",
55+
"@nativescript/android": "8.8.2",
56+
"@nativescript/ios": "8.8.1",
57+
"@nativescript/types": "~8.8.0",
58+
"@nativescript/webpack": "~5.0.0",
59+
"babel": "^6.23.0",
60+
"babel-loader": "^9.1.3",
61+
"babel-preset-solid": "^1.8.19",
62+
"solid-refresh": "^0.7.5",
63+
"typescript": "~5.4.0"
64+
}
65+
}

‎packages/template-blank-solid-ts/references.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference path="./node_modules/@nativescript/types/index.d.ts" />

‎packages/template-blank-solid-ts/tsconfig.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"compilerOptions": {
3+
"strict": true,
4+
"target": "ES2020",
5+
"module": "ESNext",
6+
"moduleResolution": "node",
7+
"lib": ["ESNext", "DOM"],
8+
"jsx": "preserve",
9+
"jsxImportSource": "@nativescript-dom/solidjs-types",
10+
"baseUrl": ".",
11+
"paths": {
12+
"~/*": ["app/*"],
13+
"@/*": ["app/*"]
14+
},
15+
"noEmit": true,
16+
"allowJs": true,
17+
"types": [
18+
"node",
19+
"@nativescript-dom/core-types",
20+
"@nativescript-dom/solidjs-types"
21+
],
22+
"allowSyntheticDefaultImports": true,
23+
"esModuleInterop": true,
24+
"experimentalDecorators": true,
25+
"emitDecoratorMetadata": true,
26+
"skipLibCheck": true,
27+
"sourceMap": true,
28+
"noEmitHelpers": true,
29+
"importHelpers": true,
30+
},
31+
"include": ["app","references.d.ts"],
32+
"exclude": ["node_modules", "platforms"]
33+
}

‎packages/template-blank-solid-ts/webpack.config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const webpack = require('@nativescript/webpack');
2+
3+
module.exports = (env) => {
4+
webpack.init(env);
5+
6+
webpack.chainWebpack((config) => {
7+
config.devServer.hotOnly(true)
8+
config.devServer.hot(true)
9+
});
10+
11+
return webpack.resolveConfig();
12+
};

‎packages/template-blank-solid/app/app.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.fab {
2+
font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
3+
font-weight: 400;
4+
}
5+
6+
.fas {
7+
font-family: 'Font Awesome 5 Free', 'fa-solid-900';
8+
font-weight: 900;
9+
}
10+
11+
.far {
12+
font-family: 'Font Awesome 5 Free', 'fa-regular-400';
13+
font-weight: 400;
14+
}
15+

‎packages/template-blank-solid/app/app.jsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Route, StackRouter } from 'solid-navigation'
2+
import Home from './components/home.jsx'
3+
4+
const App = () => {
5+
return (
6+
<StackRouter initialRouteName="Home">
7+
<Route name="Home" component={Home} />
8+
</StackRouter>
9+
)
10+
}
11+
12+
export { App }

‎packages/template-blank-solid/app/components/home.jsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { useRoute } from 'solid-navigation';
2+
3+
export default function Home() {
4+
const route = useRoute();
5+
const message = 'Blank SolidJS App'
6+
7+
return (
8+
<>
9+
<actionbar title={route.name} />
10+
<gridlayout>
11+
<label
12+
style={{
13+
fontSize: 20,
14+
horizontalAlignment: 'center',
15+
verticalAlignment: 'middle',
16+
}}
17+
>
18+
<formattedstring>
19+
<span
20+
className="fas"
21+
text={String.fromCharCode(0xf135)}
22+
style={{
23+
color: '#3A53FF',
24+
}}
25+
/>
26+
<span text={` ${message}`} />
27+
</formattedstring>
28+
</label>
29+
</gridlayout>
30+
</>
31+
)
32+
}

‎packages/template-blank-solid/app/fonts/LICENSE.txt

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
Font Awesome Free License
2+
-------------------------
3+
4+
Font Awesome Free is free, open source, and GPL friendly. You can use it for
5+
commercial projects, open source projects, or really almost whatever you want.
6+
Full Font Awesome Free license: https://fontawesome.com/license/free.
7+
8+
# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
9+
In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
10+
packaged as SVG and JS file types.
11+
12+
# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
13+
In the Font Awesome Free download, the SIL OFL license applies to all icons
14+
packaged as web and desktop font files.
15+
16+
# Code: MIT License (https://opensource.org/licenses/MIT)
17+
In the Font Awesome Free download, the MIT license applies to all non-font and
18+
non-icon files.
19+
20+
# Attribution
21+
Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
22+
Awesome Free files already contain embedded comments with sufficient
23+
attribution, so you shouldn't need to do anything additional when using these
24+
files normally.
25+
26+
We've kept attribution comments terse, so we ask that you do not actively work
27+
to remove them from files, especially code. They're a great way for folks to
28+
learn about Font Awesome.
29+
30+
# Brand Icons
31+
All brand icons are trademarks of their respective owners. The use of these
32+
trademarks does not indicate endorsement of the trademark holder by Font
33+
Awesome, nor vice versa. **Please do not use brand logos for any purpose except
34+
to represent the company, product, or service to which they refer.**

‎packages/template-blank-solid/app/fonts/fa-brands-400.ttf

128 KB
Binary file not shown.

‎packages/template-blank-solid/app/fonts/fa-regular-400.ttf

33.3 KB
Binary file not shown.

‎packages/template-blank-solid/app/fonts/fa-solid-900.ttf

188 KB
Binary file not shown.

0 commit comments

Comments
 (0)