two-way binding via bind:[attribute] not working on any element since 8.x

[xblabs]

for example

Module build failed (from ./node_modules/svelte-loader-hot/index.js):
Error: ValidationError: 'text' is not a valid binding (36:15)
34:     <slider value="80" on:valueChange="{onValueChanged}"/>
35:
36:     <searchBar bind:text="{searchQuery}">
                   ^
37:
38:   </stackLayout>
    at node_modules\svelte-loader-hot\index.js:154:12
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

error occurs on any element with binding

"dependencies": {
    "@nativescript/core": "~8.1.1",
    "@nativescript/theme": "~3.0.1",
    "svelte-native": "~0.9.6"
  },
  "devDependencies": {
    "@nativescript/android": "8.1.1",
    "@nativescript/types": "~8.1.1",
    "@nativescript/webpack": "~5.0.0",
    "svelte": "~3.35.0",
    "svelte-loader-hot": "~0.3.1",
    "svelte-native-preprocessor": "^0.2.0",
    "svelte-preprocess": "^4.7.0",
    "typescript": "~4.3.5"
  }

error also occurs after bumping deps :

 "dependencies": {
    "@nativescript/core": "~8.1.3",
    "@nativescript/theme": "~3.0.1",
    "svelte-native": "~1.0.0-beta.3"
  },
  "devDependencies": {
    "@nativescript/android": "8.1.1",
    "@nativescript/types": "~8.1.1",
    "@nativescript/webpack": "~5.0.0",
    "svelte": "~3.42.6",
    "svelte-loader-hot": "~0.3.1",
    "svelte-native-preprocessor": "^1.0.0",
    "svelte-preprocess": "^4.7.0",
    "typescript": "~4.3.5",
    "@nativescript/unit-test-runner": "^1.0.2"
  }

Working fine under v7 :

 "dependencies": {
    "@nativescript/core": "~7.0.0",
    "@nativescript/theme": "~2.3.3",
    "@nativescript/webpack": "3.0.0",
    "nativescript-mapbox": "^5.0.1",
    "svelte-native": "~0.9.1"
  },
  "devDependencies": {
    "@nativescript/android": "7.0.0",
    "svelte": "~3.24.1",
    "svelte-loader-hot": "~0.3.1",
    "svelte-native-preprocessor": "^0.2.0",
    "svelte-preprocess": "^4.0.8",
    "typescript": "~4.0.2"
  },

[shirakaba]

Looks like NativeScript 8's SearchBar does still use the field text for its text property, and it's not camel-cased or anything, so I'm not immediately clear what the source of the problem may be.

[xblabs]

The issue seems to exist for all bindable attributes on all elements, e.g.

https://svelte-native.technology/docs#segmentedbar https://svelte-native.technology/docs#slider https://svelte-native.technology/docs#switch https://svelte-native.technology/docs#textfield https://svelte-native.technology/docs#textview

etc

[halfnelson]

This is a symptom of the svelte native preprocessor not running, it replaces ALL bind calls in the source. Is it part of your svelte.config.js?

On Sat, 25 Sep 2021, 1:03 am Henry Schmieder, @.***> wrote:

The issue seems to exist for all bindable attributes, e.g.

https://svelte-native.technology/docs#segmentedbar https://svelte-native.technology/docs#slider https://svelte-native.technology/docs#switch https://svelte-native.technology/docs#textfield https://svelte-native.technology/docs#textview

etc

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/halfnelson/svelte-native/issues/249#issuecomment-926698683, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEGS5BYXDHS7QTQLRQNPQ3UDSHL7ANCNFSM5EULLBDQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[xblabs]

This is a symptom of the svelte native preprocessor not running, it replaces ALL bind calls in the source. Is it part of your svelte.config.js?

yes, same as in the working ns v7 version :

const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess(),
}

webpack.config.js is default. Here the full package.json :

{
  "name": "nativescript-blank",
  "main": "app/app.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript/core": "~8.1.3",
    "@nativescript/theme": "~3.0.1",
    "svelte-native": "~1.0.0-beta.3"
  },
  "devDependencies": {
    "@nativescript/android": "8.1.1",
    "@nativescript/types": "~8.1.1",
    "@nativescript/unit-test-runner": "^1.0.2",
    "@nativescript/webpack": "~5.0.0",
    "svelte": "~3.42.6",
    "svelte-loader-hot": "~0.3.1",
    "svelte-native-preprocessor": "^1.0.0",
    "svelte-preprocess": "^4.7.0",
    "typescript": "~4.3.5"
  }
}

[xblabs]

Just looked at https://market.nativescript.org/plugins/svelte-native-preprocessor/

Changed svelte.config.js to

const sveltePreprocess = require( 'svelte-preprocess' )
const svelteNativePreprocessor = require( "svelte-native-preprocessor" );

module.exports = {
  compilerOptions: {
    namespace: 'foreign'
  },
  preprocess: [ svelteNativePreprocessor(), sveltePreprocess() ]
}

which is working now