feat: solid-js templates with TS option as well (#235)

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

@@ -0,0 +1,28 @@
+# NativeScript
+hooks/
+node_modules/
+platforms/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+.idea
+.cloud
+.project
+tmp/
+typings/
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json

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

@@ -0,0 +1 @@
+legacy-peer-deps=true

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

@@ -0,0 +1,34 @@
+# NativeScript with Solid Blank Template
+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.
+
+## Quick Start
+Execute the following command to create an app from this template:
+
+```
+ns create my-blank-solid --template @nativescript/template-blank-solid
+```
+
+> 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).
+
+If you want to create a new app that uses the source of the template from the `main` branch, you can execute the following:
+
+```
+# clone nativescript-app-templates monorepo locally
+git clone [email protected]:NativeScript/nativescript-app-templates.git
+
+# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
+ns create my-blank-solid --template nativescript-app-templates/packages/template-blank-solid
+```
+
+**NB:** Please, have in mind that the main branch may refer to dependencies that are not on NPM yet!
+
+## Get Help
+The NativeScript framework has a vibrant community that can help when you run into problems.
+
+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.
+
+If you have found an issue with this template, please report the problem in the [NativeScript repository](https://github.com/NativeScript/NativeScript/issues).
+
+## Contributing
+
+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

@@ -0,0 +1,15 @@
+.fab {
+  font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
+  font-weight: 400;
+}
+
+.fas {
+  font-family: 'Font Awesome 5 Free', 'fa-solid-900';
+  font-weight: 900;
+}
+
+.far {
+  font-family: 'Font Awesome 5 Free', 'fa-regular-400';
+  font-weight: 400;
+}
+

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

@@ -0,0 +1,20 @@
+import { Route, RouteDefinition, StackRouter } from 'solid-navigation'
+import Home from './components/home'
+
+declare module 'solid-navigation' {
+  export interface Routers {
+    Default: {
+      Home: RouteDefinition
+    }
+  }
+}
+
+const App = () => {
+  return (
+    <StackRouter initialRouteName="Home">
+      <Route name="Home" component={Home} />
+    </StackRouter>
+  )
+}
+
+export { App }

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

@@ -0,0 +1,32 @@
+import { useRoute } from 'solid-navigation';
+
+export default function Home() {
+  const route = useRoute();
+  const message = 'Blank SolidJS App'
+
+  return (
+    <>
+      <actionbar title={route.name} />
+      <gridlayout>
+        <label
+          style={{
+            fontSize: 20,
+            horizontalAlignment: 'center',
+            verticalAlignment: 'middle',
+          }}
+        >
+          <formattedstring>
+            <span
+              className="fas"
+              text={String.fromCharCode(0xf135)}
+              style={{
+                color: '#3A53FF',
+              }}
+            />
+            <span text={` ${message}`} />
+          </formattedstring>
+        </label>
+      </gridlayout>
+    </>
+  )
+}

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

@@ -0,0 +1,34 @@
+Font Awesome Free License
+-------------------------
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
+packaged as SVG and JS file types.
+
+# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+# Attribution
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+# Brand Icons
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**

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

@@ -0,0 +1,11 @@
+import { Application } from '@nativescript/core';
+import { render } from '@nativescript-community/solid-js'
+import { App } from './app'
+
+Application.run({
+  create: () => {
+    document.body.actionBarHidden = true;
+    render(() => <App />, document.body)
+    return document;
+  },
+})

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

@@ -0,0 +1,65 @@
+{
+  "name": "@nativescript/template-blank-solid-ts",
+  "main": "app/index.js",
+  "version": "8.8.1",
+  "description": "Nativescript Starter with Solid",
+  "author": "NativeScript Team <[email protected]>",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NativeScript/nativescript-app-templates"
+  },
+  "homepage": "https://github.com/NativeScript/nativescript-app-templates",
+  "bugs": {
+    "url": "https://github.com/NativeScript/NativeScript/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "App_Resources",
+    "hooks",
+    "tools",
+    "!tools/assets",
+    "patches",
+    "types",
+    ".editorconfig",
+    ".npmrc",
+    "tailwind.config.js",
+    "tsconfig.json",
+    "webpack.config.js"
+  ],
+  "keywords": [
+    "nativescript",
+    "mobile",
+    "{N}",
+    "solid",
+    "solidjs"
+  ],
+  "scripts": {},
+  "dependencies": {
+    "@nativescript-community/solid-js": "^0.0.6",
+    "@nativescript/core": "~8.8.0",
+    "dominative": "^0.1.3",
+    "solid-js": "^1.8.21",
+    "solid-navigation": "1.0.0-alpha.16",
+    "undom-ng": "^1.1.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-typescript": "^7.24.1",
+    "@nativescript-dom/core-types": "1.0.29",
+    "@nativescript-dom/solidjs-types": "1.0.23",
+    "@nativescript/android": "8.8.2",
+    "@nativescript/ios": "8.8.1",
+    "@nativescript/types": "~8.8.0",
+    "@nativescript/webpack": "~5.0.0",
+    "babel": "^6.23.0",
+    "babel-loader": "^9.1.3",
+    "babel-preset-solid": "^1.8.19",
+    "solid-refresh": "^0.7.5",
+    "typescript": "~5.4.0"
+  }
+}

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

@@ -0,0 +1 @@
+/// <reference path="./node_modules/@nativescript/types/index.d.ts" />

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

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "lib": ["ESNext", "DOM"],
+    "jsx": "preserve",
+    "jsxImportSource": "@nativescript-dom/solidjs-types",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["app/*"],
+      "@/*": ["app/*"]
+    },
+    "noEmit": true,
+    "allowJs": true,
+    "types": [
+      "node",
+      "@nativescript-dom/core-types",
+      "@nativescript-dom/solidjs-types"
+    ],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "noEmitHelpers": true,
+    "importHelpers": true,
+  },
+  "include": ["app","references.d.ts"],
+  "exclude": ["node_modules", "platforms"]
+}

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

@@ -0,0 +1,12 @@
+const webpack = require('@nativescript/webpack');
+
+module.exports = (env) => {
+  webpack.init(env);
+
+  webpack.chainWebpack((config) => {
+    config.devServer.hotOnly(true)
+    config.devServer.hot(true)
+  });
+
+  return webpack.resolveConfig();
+};

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

@@ -0,0 +1,15 @@
+.fab {
+  font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
+  font-weight: 400;
+}
+
+.fas {
+  font-family: 'Font Awesome 5 Free', 'fa-solid-900';
+  font-weight: 900;
+}
+
+.far {
+  font-family: 'Font Awesome 5 Free', 'fa-regular-400';
+  font-weight: 400;
+}
+

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

@@ -0,0 +1,12 @@
+import { Route, StackRouter } from 'solid-navigation'
+import Home from './components/home.jsx'
+
+const App = () => {
+  return (
+    <StackRouter initialRouteName="Home">
+      <Route name="Home" component={Home} />
+    </StackRouter>
+  )
+}
+
+export { App }

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

@@ -0,0 +1,32 @@
+import { useRoute } from 'solid-navigation';
+
+export default function Home() {
+  const route = useRoute();
+  const message = 'Blank SolidJS App'
+
+  return (
+    <>
+      <actionbar title={route.name} />
+      <gridlayout>
+        <label
+          style={{
+            fontSize: 20,
+            horizontalAlignment: 'center',
+            verticalAlignment: 'middle',
+          }}
+        >
+          <formattedstring>
+            <span
+              className="fas"
+              text={String.fromCharCode(0xf135)}
+              style={{
+                color: '#3A53FF',
+              }}
+            />
+            <span text={` ${message}`} />
+          </formattedstring>
+        </label>
+      </gridlayout>
+    </>
+  )
+}

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

@@ -0,0 +1,34 @@
+Font Awesome Free License
+-------------------------
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
+packaged as SVG and JS file types.
+
+# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+# Attribution
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+# Brand Icons
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**