feat(solid): improve default setup

Author: NathanWalker

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

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/template-blank-solid-ts",
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "version": "9.0.0",
   "description": "Nativescript Starter with Solid",
   "author": "NativeScript Team <oss@nativescript.org>",
@@ -39,25 +39,25 @@
   ],
   "scripts": {},
   "dependencies": {
-    "@nativescript-community/solid-js": "^0.0.6",
+    "@nativescript-community/solid-js": "^0.1.2",
     "@nativescript/core": "~9.0.0",
     "dominative": "^0.1.3",
-    "solid-js": "^1.8.21",
+    "solid-js": "^1.9.11",
     "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.23.3",
-    "@nativescript-dom/core-types": "1.0.29",
-    "@nativescript-dom/solidjs-types": "1.0.23",
+    "@nativescript-dom/core-types": "~1.0.32",
+    "@nativescript-dom/solidjs-types": "~1.0.25",
     "@nativescript/types": "~9.0.0",
-    "@nativescript/webpack": "~5.0.25",
+    "@nativescript/webpack": "~5.0.32",
     "babel": "^6.23.0",
     "babel-loader": "^9.1.3",
     "babel-preset-solid": "^1.8.19",
     "solid-refresh": "^0.7.5",
-    "typescript": "~5.4.0"
+    "typescript": "~5.9.0"
   }
 }

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

@@ -1,14 +1,11 @@
-.fab {
-  font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
-  font-weight: 400;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-.fas {
-  font-family: 'Font Awesome 5 Free', 'fa-solid-900';
-  font-weight: 900;
+.ns-light Page {
+  background-color: #edf1f9;
 }
 
-.far {
-  font-family: 'Font Awesome 5 Free', 'fa-regular-400';
-  font-weight: 400;
-}
+.ns-dark Page {
+  background-color: #1b1f28;
+}

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

@@ -1,31 +1,17 @@
-import { useRoute } from 'solid-navigation';
+import { useRoute } from 'solid-navigation'
 
 export default function Home() {
-  const route = useRoute();
-  const message = 'Blank SolidJS App'
+  const route = useRoute()
+  const message = '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>
+          text={message}
+          class="text-center text-2xl font-bold"
+        />
       </gridlayout>
     </>
   )

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

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

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

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{css,xml,html,ts,tsx,jsx}'],
+  // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
+  darkMode: ['class', '.ns-dark'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false, // disables browser-specific resets
+  },
+}