@nativescript/template-blank-solid-vision 8.6.0

package/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/app.tsx

@@ -0,0 +1,73 @@
+import { CollectionView } from "@nativescript-community/ui-collectionview";
+import { ItemLoadingEventData } from "@nativescript-dom/core-types";
+import { Route, StackRouter } from "./router";
+import { Home } from "./routes/home";
+//@ts-ignore
+import { makeListView, registerElement } from "dominative";
+import { Settings } from "./routes/settings";
+
+registerElement(
+  "collectionview",
+  makeListView(CollectionView, { force: true })
+);
+
+declare global {
+  interface HTMLCollectionViewElement extends HTMLListViewElement {}
+
+  var HTMLCollectionViewElement: {
+    prototype: HTMLCollectionViewElement;
+    new (): HTMLCollectionViewElement;
+  };
+
+  interface HTMLCollectionViewElement extends HTMLListViewElement {}
+
+  var HTMLCollectionViewElement: {
+    prototype: HTMLCollectionViewElement;
+    new (): HTMLCollectionViewElement;
+  };
+}
+
+declare module "@nativescript-dom/solidjs-types/jsx-runtime" {
+  export namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * Register custom library view
+       */
+      collectionview: Partial<
+        HTMLListViewElementAttributes<HTMLCollectionViewElement>
+      >;
+
+      /**
+       * Register dominative elements
+       */
+      itemtemplate: Partial<
+        HTMLViewBaseElementAttributes & {
+          "on:createView": (event: ItemLoadingEventData) => void;
+          "on:itemLoading": (event: ItemLoadingEventData) => void;
+          key: string;
+        }
+      >;
+      arrayprop: Partial<
+        HTMLViewBaseElementAttributes & {
+          key: string;
+        }
+      >;
+      keyprop: Partial<
+        HTMLViewBaseElementAttributes & {
+          key: string;
+        }
+      >;
+    }
+  }
+}
+
+const App = () => {
+  return (
+    <StackRouter initialRouteName="Home">
+      <Route name="Home" component={Home as any} />
+      <Route name="Settings" component={Settings as any} />
+    </StackRouter>
+  );
+};
+
+export { App };

package/src/components/collectionview.tsx

@@ -0,0 +1,95 @@
+import { JSX } from "@nativescript-dom/solidjs-types/jsx-runtime";
+import { ContentView } from "@nativescript/core";
+import {
+  children,
+  Component,
+  createSignal,
+  For,
+  getOwner,
+  Owner,
+  runWithOwner,
+} from "solid-js";
+
+export const DynamicList: Component<
+  {
+    renderItem: (props: { item: any; index: any; type: any }) => any;
+    items: any[];
+    onItemType: (item: any, index: any) => string;
+    itemTypes: string[];
+  } & Omit<
+    JSX.IntrinsicElements["collectionview"],
+    "itemTemplateSelector" | "items" | "itemTemplates" | "itemTemplate"
+  >
+> = (props) => {
+  const owner = getOwner();
+  const { items, renderItem, onItemType, itemTypes, ...restProps } = props;
+  const templates = props.itemTypes || ["_default"];
+  return (
+    <contentview
+      style={{
+        width: "100%",
+        height: "100%",
+        flexGrow: 1,
+      }}
+    >
+      <collectionview
+        {...restProps}
+        items={{
+          length: props.items?.length,
+          getItem(index: number) {
+            return {
+              index: props.items?.[index],
+            };
+          },
+        }}
+        itemTemplateSelector={(item: any, index: any) => {
+          return onItemType?.(item, index) || "_default";
+        }}
+      >
+        <arrayprop key="itemTemplates">
+          <For each={templates}>
+            {(key) => (
+              <itemtemplate
+                key={key}
+                on:itemLoading={(event: any) => {
+                  const { view, item, index } = event;
+                  const update_solid_context = (view as any)
+                    .__update_solid_context;
+                  if (update_solid_context) {
+                    update_solid_context(item, index, key);
+                  } else {
+                    runWithOwner(owner as Owner, () => {
+                      const [item, setItem] = createSignal(event.item);
+                      const [index, setIndex] = createSignal<number>(
+                        event.index || 0
+                      );
+                      const [type, setType] = createSignal<string>(key);
+                      const element = children(() =>
+                        renderItem({ item, index, type: type })
+                      );
+
+                      (event.view as ContentView).content = element() as never;
+
+                      (event.view as any).__update_solid_context = (
+                        item: any,
+                        index: number,
+                        type: string
+                      ) => {
+                        setItem(item);
+                        setIndex(index);
+                        setType(type);
+                      };
+                    });
+                  }
+                }}
+                on:createView={(event: any) => {
+                  event.view = document.createElement("ContentView") as any;
+                }}
+              />
+            )}
+          </For>
+        </arrayprop>
+      </collectionview>
+    </contentview>
+  );
+};

package/src/components/list.tsx

@@ -0,0 +1,81 @@
+import { JSX } from "@nativescript-dom/solidjs-types/jsx-runtime";
+import {
+  children,
+  createSignal,
+  getOwner,
+  Owner,
+  runWithOwner,
+  Component,
+  For,
+} from "solid-js";
+
+export const List: Component<
+  {
+    renderItem: (props: { item: any; index: any; type: any }) => any;
+    items: any[];
+    onItemType: (item: any, index: any) => string;
+    itemTypes: string[];
+  } & Omit<
+    JSX.IntrinsicElements["listview"],
+    "itemTemplateSelector" | "items" | "itemTemplates" | "itemTemplate"
+  >
+> = (props) => {
+  const owner = getOwner();
+  const { items, renderItem, onItemType, itemTypes, ...restProps } = props;
+  const templates = props.itemTypes || ["_default"];
+
+  return (
+    <listview
+      {...restProps}
+      items={{
+        length: props.items?.length,
+        getItem(index) {
+          return {
+            index: props.items?.[index],
+          };
+        },
+      }}
+      itemTemplateSelector={(item, index) => {
+        return onItemType?.(item, index) || "_default";
+      }}
+    >
+      <arrayprop key="itemTemplates">
+        <For each={templates}>
+          {(key) => (
+            <itemtemplate
+              key={key}
+              on:itemLoading={(event) => {
+                const { view, item, index } = event;
+                const update_solid_context = (view as any)
+                  .__update_solid_context;
+                if (update_solid_context) {
+                  update_solid_context(item, index, key);
+                }
+              }}
+              on:createView={(event) => {
+                runWithOwner(owner as Owner, () => {
+                  const [item, setItem] = createSignal();
+                  const [index, setIndex] = createSignal<number>(0);
+                  const [type, setType] = createSignal<string>(key);
+                  const element = children(() =>
+                    renderItem({ item, index, type: type })
+                  );
+                  event.view = element() as never;
+                  (event.view as any).__update_solid_context = (
+                    item: any,
+                    index: number,
+                    type: string
+                  ) => {
+                    setItem(item);
+                    setIndex(index);
+                    setType(type);
+                  };
+                });
+              }}
+            />
+          )}
+        </For>
+      </arrayprop>
+    </listview>
+  );
+};

package/src/index.js

@@ -0,0 +1,14 @@
+import { Application } from "@nativescript/core";
+import { render } from "@nativescript-community/solid-js";
+import { App } from "./app";
+import { document } from "dominative";
+
+document.body.actionBarHidden = true;
+document.body.appendChild(document.createElement("ContentView"));
+
+render(App, document.body.firstElementChild);
+
+const create = () => document;
+
+Application.run({ create });
+

package/src/router.ts

@@ -0,0 +1,14 @@
+import { createStackRouter, RouteDefinition } from "solid-navigation";
+
+declare module "solid-navigation" {
+  export interface Routers {
+    Default: {
+      Home: RouteDefinition;
+      Settings: RouteDefinition;
+      Feed: RouteDefinition;
+    };
+  }
+}
+
+export const { Route, StackRouter, useParams, useRouter } =
+  createStackRouter<"Default">();

package/src/routes/home.tsx

@@ -0,0 +1,23 @@
+import { useRouter } from "../router";
+
+export const Home = () => {
+  const router = useRouter();
+
+  return (
+    <>
+      <actionbar title="Home"/>
+      {/* @ts-ignore */}
+      <gridlayout rows="*,auto,*">
+        <button
+          row="1"
+          className="rounded-full bg-blue-500 text-white w-[300] p-3 text-2xl font-bold h-[60] text-center capitalize" iosOverflowSafeArea="false" 
+          text="View Settings"
+          on:tap={() => {
+            router.navigate("Settings");
+          }}
+        />
+        <image rowSpan="3" src="~/assets/solid.png" width="100" height="100" className="align-bottom mb-2" />
+      </gridlayout>
+    </>
+  );
+};

package/src/routes/settings.tsx

@@ -0,0 +1,31 @@
+import { useRouter } from "../router";
+
+export const Settings = () => {
+  const router = useRouter();
+  return (
+    <>
+      <actionbar title="Settings" />
+      <flexboxlayout
+        style={{
+          height: "100%",
+          width: "100%",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <button
+          text="Go to Home"
+          on:tap={() => {
+            router.goBack();
+          }}
+          style={{
+            height: 40,
+            width: 150,
+            borderRadius: "10px",
+          }}
+        />
+      </flexboxlayout>
+    </>
+  );
+};

package/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./src/**/*.{css,xml,html,vue,svelte,ts,tsx}'],
+    // 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
+    },
+};
+
+  

package/tools/dot.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

package/tools/vscode.extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["nativescript.nativescript"]
+}

package/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "es2017",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": ["es2017", "DOM"],
+    "sourceMap": true,
+    "jsx": "preserve",
+    "jsxImportSource": "@nativescript-dom/solidjs-types",
+    "noEmitHelpers": true,
+    "importHelpers": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"],
+      "@/*": ["src/*"]
+    },
+    "allowJs": true,
+    "types": [
+      "node",
+      "@nativescript-dom/core-types",
+      "@nativescript-dom/solidjs-types"
+    ],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "downlevelIteration": true,
+    "maxNodeModuleJsDepth": 5
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "platforms"]
+}

package/webpack.config.js

@@ -0,0 +1,9 @@
+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();
+};