https://github.com/webmasterdevlin/nativescript-svelte
Svelte's cross-platform mobile development platform
https://github.com/webmasterdevlin/nativescript-svelte
Last synced: 3 months ago
JSON representation
Svelte's cross-platform mobile development platform
- Host: GitHub
- URL: https://github.com/webmasterdevlin/nativescript-svelte
- Owner: webmasterdevlin
- License: apache-2.0
- Created: 2019-10-10T22:01:22.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T10:34:55.000Z (over 2 years ago)
- Last Synced: 2025-02-11T13:22:19.154Z (4 months ago)
- Language: JavaScript
- Size: 2.97 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
This is a barebones svelte-native project template. It was created directly from a nativescript core project template. It provides an easy way to get started with a svelte native project.
# Usage
You can get started with this using `degit`
```bash
$ degit halfnelson/svelte-native-template myapp
```
your svelte-native app will be found in the `myapp` folder
# Recreating From Scratch
This was created using:
Create ns core app
```bash
tns create svelte-ns-testapp --appid sntest.halfnelson.github.io --ts
```
Install svelte, svelte-native, svelte-loader
```bash
$ npm install --save-dev svelte
$ npm install svelte-native
$ npm install --save-dev "halfnelson/svelte-loader#fix-virtual-purge"
$ npm install --save-dev svelte-native-preprocessor
```
import SvelteNativePreprocessor in webpack.config.js
```js
const svelteNativePreprocessor = require("svelte-native-preprocessor");
```
Append svelte-loader to end module rules after ts
```js
{
test: /\.svelte$/,
exclude: /node_modules/,
use: [
{
loader: 'svelte-loader',
options: {
preprocess: svelteNativePreprocessor()
}
}
]
}
```
Remove nativescript files from `app` except for `package.json` and `app.ts` and `app.css`
make the following changes to the app folder:
add `svelte-components.d.ts`:
```js
declare module "*.svelte" {
export default SvelteComponent;
}
```
change `app.ts` to:
```js
import { svelteNative } from "svelte-native";
import App from "./App.svelte";
svelteNative(App, {});
```
add `App.svelte`:
```html
let counter = 42;
let message;
$: message = (counter <= 0)
? "Hoorraaay! You unlocked the Svelte-Native clicker achievement!"
: `${counter} taps left`
const onTap = () => counter--;
```
Run the app with an ensure it worked
```bash
tns run android
```