Code Monkey home page Code Monkey logo

kotlin-wasm-examples's Introduction

Incubator

Kotlin/Wasm examples

This repository contains a collection of examples demonstrating how to use Kotlin/Wasm. Each example includes the source code and a README.md file explaining how to build and run the example.

Note: To know more about Kotlin/Wasm, see the Kotlin documentation.

Examples

These are the Kotlin/Wasm examples you can try:

  • Compose example — A simple Compose Multiplatform application template
  • Compose Jetsnack — Web version of a Jetsnack application built with Compose Multiplatform
  • Compose image viewer — Web version of an image viewer application built with Compose Multiplatform
  • Browser example — A simple application showing "Hello World" in the browser using DOM API
  • Node.js example — A simple application printing "Hello World" in Node.js
  • KoWasm — Server-side and full stack development with Kotlin and WebAssembly leveraging WASI and Component Model
  • WASI example — A simple application using WASI API in Node.js and Deno

Build and run

To build and run an example, follow these steps:

  1. Clone this repository.
  2. Navigate to the directory of the example you want to build and run.
  3. Follow the instructions in the README.md file of the example you want to build and run.

Feedback and questions

Try the examples and share your feedback or questions in our #webassembly Slack channel. Get a Slack invite. You can also share your comments with @bashorov on X (Twitter).

kotlin-wasm-examples's People

Contributors

alejandrapedroza avatar bashor avatar eymar avatar igoriakovlev avatar ilgonmic avatar jamesward avatar jsmonk avatar koshachy avatar schahen avatar sdeleuze avatar skuzmich avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

kotlin-wasm-examples's Issues

jetsnack wasm

great initial work!

on macos chrome 115 with webasm-gc turned on, there are a few rough spots:

filtering/sorting doesnt work
back button doesnt work
on the search page, every time a key is pressed it displays 3 or 4 key repeated keys

Add file upload example

Please provide an example demonstrating how to allow users to select a file from disk and upload it / load it into the app.

Doesn't run on Firefox Nightly

Trying to run but it fails on Firefox 115.0.2 and Firefox Nightly 117.0a1 with this:

GET http://localhost:8080/favicon.ico[HTTP/1.1 404 Not Found 0ms]

Using experimental Kotlin/Wasm may require enabling experimental features in the target environment. - Chrome: enable WebAssembly Garbage Collection at chrome://flags/#enable-webassembly-garbage-collection or run the program with the --js-flags=--experimental-wasm-gc command line argument. - Firefox: enable javascript.options.wasm_function_references and javascript.options.wasm_gc at about:config. - Edge: run the program with the --js-flags=--experimental-wasm-gc command line argument. - Node.js: run the program with the --experimental-wasm-gc command line argument. For more information see https://kotl.in/wasm_help/. jetsnackwasmapp.uninstantiated.mjs:4040:19

Uncaught CompileError: wasm validation error: at offset 525346: incompatible super type
instantiate http://localhost:8080/jetsnackwasmapp.uninstantiated.mjs:4020
async* http://localhost:8080/load.mjs:7
jetsnackwasmapp.wasm:4020

Could not find org.jetbrains.compose.runtime:runtime:1.5.2.1-Beta

I'm trying to build compose-imageviewer. Following the instruction in the readme, I run ./gradlew :desktopApp:run and get the following errors:

* What went wrong:
Execution failed for task ':shared:compileKotlinDesktop'.
> Could not resolve all files for configuration ':shared:desktopCompileClasspath'.
   > Could not find org.jetbrains.compose.runtime:runtime:1.5.2.1-Beta.
     Searched in the following locations:
       - https://dl.google.com/dl/android/maven2/org/jetbrains/compose/runtime/runtime/1.5.2.1-Beta/runtime-1.5.2.1-Beta.pom
       - https://repo.maven.apache.org/maven2/org/jetbrains/compose/runtime/runtime/1.5.2.1-Beta/runtime-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/public/p/compose/dev/org/jetbrains/compose/runtime/runtime/1.5.2.1-Beta/runtime-1.5.2.1-Beta.pom
       - file:/home/equi/.m2/repository/org/jetbrains/compose/runtime/runtime/1.5.2.1-Beta/runtime-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental/org/jetbrains/compose/runtime/runtime/1.5.2.1-Beta/runtime-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/kotlin/dev/org/jetbrains/compose/runtime/runtime/1.5.2.1-Beta/runtime-1.5.2.1-Beta.pom
     Required by:
         project :shared
   > Could not find org.jetbrains.compose.foundation:foundation:1.5.2.1-Beta.
     Searched in the following locations:
       - https://dl.google.com/dl/android/maven2/org/jetbrains/compose/foundation/foundation/1.5.2.1-Beta/foundation-1.5.2.1-Beta.pom
       - https://repo.maven.apache.org/maven2/org/jetbrains/compose/foundation/foundation/1.5.2.1-Beta/foundation-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/public/p/compose/dev/org/jetbrains/compose/foundation/foundation/1.5.2.1-Beta/foundation-1.5.2.1-Beta.pom
       - file:/home/equi/.m2/repository/org/jetbrains/compose/foundation/foundation/1.5.2.1-Beta/foundation-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental/org/jetbrains/compose/foundation/foundation/1.5.2.1-Beta/foundation-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/kotlin/dev/org/jetbrains/compose/foundation/foundation/1.5.2.1-Beta/foundation-1.5.2.1-Beta.pom
     Required by:
         project :shared
   > Could not find org.jetbrains.compose.material:material:1.5.2.1-Beta.
     Searched in the following locations:
       - https://dl.google.com/dl/android/maven2/org/jetbrains/compose/material/material/1.5.2.1-Beta/material-1.5.2.1-Beta.pom
       - https://repo.maven.apache.org/maven2/org/jetbrains/compose/material/material/1.5.2.1-Beta/material-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/public/p/compose/dev/org/jetbrains/compose/material/material/1.5.2.1-Beta/material-1.5.2.1-Beta.pom
       - file:/home/equi/.m2/repository/org/jetbrains/compose/material/material/1.5.2.1-Beta/material-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental/org/jetbrains/compose/material/material/1.5.2.1-Beta/material-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/kotlin/dev/org/jetbrains/compose/material/material/1.5.2.1-Beta/material-1.5.2.1-Beta.pom
     Required by:
         project :shared
   > Could not find org.jetbrains.compose.material3:material3:1.5.2.1-Beta.
     Searched in the following locations:
       - https://dl.google.com/dl/android/maven2/org/jetbrains/compose/material3/material3/1.5.2.1-Beta/material3-1.5.2.1-Beta.pom
       - https://repo.maven.apache.org/maven2/org/jetbrains/compose/material3/material3/1.5.2.1-Beta/material3-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/public/p/compose/dev/org/jetbrains/compose/material3/material3/1.5.2.1-Beta/material3-1.5.2.1-Beta.pom
       - file:/home/equi/.m2/repository/org/jetbrains/compose/material3/material3/1.5.2.1-Beta/material3-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental/org/jetbrains/compose/material3/material3/1.5.2.1-Beta/material3-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/kotlin/dev/org/jetbrains/compose/material3/material3/1.5.2.1-Beta/material3-1.5.2.1-Beta.pom
     Required by:
         project :shared
   > Could not find org.jetbrains.compose.components:components-resources:1.5.2.1-Beta.
     Searched in the following locations:
       - https://dl.google.com/dl/android/maven2/org/jetbrains/compose/components/components-resources/1.5.2.1-Beta/components-resources-1.5.2.1-Beta.pom
       - https://repo.maven.apache.org/maven2/org/jetbrains/compose/components/components-resources/1.5.2.1-Beta/components-resources-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/public/p/compose/dev/org/jetbrains/compose/components/components-resources/1.5.2.1-Beta/components-resources-1.5.2.1-Beta.pom
       - file:/home/equi/.m2/repository/org/jetbrains/compose/components/components-resources/1.5.2.1-Beta/components-resources-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental/org/jetbrains/compose/components/components-resources/1.5.2.1-Beta/components-resources-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/kotlin/dev/org/jetbrains/compose/components/components-resources/1.5.2.1-Beta/components-resources-1.5.2.1-Beta.pom
     Required by:
         project :shared
   > Could not find org.jetbrains.compose.desktop:desktop:1.5.2.1-Beta.
     Searched in the following locations:
       - https://dl.google.com/dl/android/maven2/org/jetbrains/compose/desktop/desktop/1.5.2.1-Beta/desktop-1.5.2.1-Beta.pom
       - https://repo.maven.apache.org/maven2/org/jetbrains/compose/desktop/desktop/1.5.2.1-Beta/desktop-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/public/p/compose/dev/org/jetbrains/compose/desktop/desktop/1.5.2.1-Beta/desktop-1.5.2.1-Beta.pom
       - file:/home/equi/.m2/repository/org/jetbrains/compose/desktop/desktop/1.5.2.1-Beta/desktop-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental/org/jetbrains/compose/desktop/desktop/1.5.2.1-Beta/desktop-1.5.2.1-Beta.pom
       - https://maven.pkg.jetbrains.space/kotlin/p/kotlin/dev/org/jetbrains/compose/desktop/desktop/1.5.2.1-Beta/desktop-1.5.2.1-Beta.pom
     Required by:
         project :shared

Consider documenting the production build tasks and `applyBinaryen()`

It might be a good idea to document the production tasks wasmBrowserProductionRun or wasmBrowserDistribution as well as the (commented-out) applyBinaryen() optimization. Without, interested parties end up with a 1MB .wasm file, where the optimized build is 7KB for the hello world example.

jb-compose 1.5.0-dev1114

Hi
jb-compose 1.5.0-dev1114 is came and use kotlin 1.9.0 and MD3 1.1.1
i can't run wasm web with that
can you update the example project?
thank you

unable to scroll by touch screen in online demo

it works fine if i use mouse wheel for scroll.

im using firefox 124 with wayland. confirmed scroll by touch is working in another wasm ui project demo, so it unlikely caused by my broken setup

[compose-imageviewer] Folder: Shared ?

if it's only the Compose Web ( WebAssembly ) project inside the "shared" folder, why name it shared ?

let's pls rename it to "web" , it's not shared with anything and it's misleading all users.

Up suggest

image

xhr is error. maybe it can be filter.

README doesn't say whether web Compose targets canvas or html

When evaluating the overall Compose platform, it'd be useful to know whether the web target takes an approach like Flutter where things are mostly rendered with canvas and don't use native elements, or whether it'd be a little more like react-native-web targeting semantic, accessible html5 elements, or something in between.

Can your intended approach be documented somewhere?

Compose Web JS is Needed

A few months ago I proudly wrote my web app in Kotlin using Compose for Web.

It was a beautiful thing. It just worked in normal browsers. I loved showing it off to my developer friends, emphasizing that even the CSS was in Kotlin.

Alas, when this week I returned to further develop the app -- it's all gone :-( Compose for Web no longer seems to compile to JS. It seems to compile to wasm, which means it doesn't work in normal browsers.

Here's the key problem -- while wasm is good, how could anyone get their users to upgrade their browsers or apply a special flag to get wasm to work?

Is there really no way to compile to javascript so it just runs on normal users browsers? I really hope I am mistaken in understanding that even when compose is fully implemented on wasm development, it will still need months to years of upgrades to propagate in user-land, before we can successfully consider using production apps. (I'm staring at nodjs/React hell as I write this .. please tell me there's a way to get back the beautiful Compose web I saw and used just a few months ago)

Input layout unable to past just copy

Input layout unable to past just copy

OutlinedTextField(
modifier = Modifier.padding(start = 10.dp),
value = templateData.customerName,
onValueChange = {
templateData.customerName = it
formatResult()
},
label = { Text("Customer") }
)

`Error: Module not specified` when trying to run compose-imageviewer:androidApp from Android Studio.

Clone the project, open in AS.

Expected: can run "androidApp" with the "green triangle" button
Actual: it doesn't work, the "run/debug configuration" dialog shows "Module: " and the Error: Module not specified error message.

Additionally, filtering by package name in the logcat panel doesn't work.

Android Studio Giraffe | 2022.3.1 Patch 2
Build #AI-223.8836.35.2231.10811636, built on September 14, 2023
Runtime version: 17.0.6+0-17.0.6b829.9-10027231 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Linux 6.1.19-gentoo
GC: G1 Young Generation, G1 Old Generation
Memory: 1280M
Cores: 12
Registry:
    external.system.auto.import.disabled=true
    ide.text.editor.with.preview.show.floating.toolbar=false
Current Desktop: Undefined%

Horizontal scrolling does not work in the online demo

I'm trying the online demo at https://zal.im/wasm/jetsnack/ on a Linux Mint system running Chrome Version 119.0.6045.105 (Official Build) (64-bit).

The page renders, but I am unable to drag the out of view items in the rows. There is also no response to clicking on the scroll arrow. The console shows several errors of the following two types:

WebGL: INVALID_ENUM: getParameter: invalid parameter name, WEBGL_debug_renderer_info not enabled
  _glGetString @ skiko.js.5776
WebGL: INVALID_OPERATION: delete: object does not belong to this context
  _glDeleteBuffers @ skiko.js:5133

ConcurrentModificationException

when run desktop app, got this

java.util.ConcurrentModificationException
        at java.base/java.util.Vector$Itr.checkForComodification(Vector.java:1321)
        at java.base/java.util.Vector$Itr.next(Vector.java:1277)
        at java.desktop/sun.java2d.cmm.ProfileDeferralMgr.activateProfiles(ProfileDeferralMgr.java:93)
        at java.desktop/java.awt.color.ICC_Profile.getInstance(ICC_Profile.java:784)
        at java.desktop/com.sun.imageio.plugins.jpeg.JPEGImageReader.setImageData(JPEGImageReader.java:779)
        at java.desktop/com.sun.imageio.plugins.jpeg.JPEGImageReader.readImageHeader(Native Method)
        at java.desktop/com.sun.imageio.plugins.jpeg.JPEGImageReader.readNativeHeader(JPEGImageReader.java:731)
        at java.desktop/com.sun.imageio.plugins.jpeg.JPEGImageReader.checkTablesOnly(JPEGImageReader.java:347)
        at java.desktop/com.sun.imageio.plugins.jpeg.JPEGImageReader.gotoImage(JPEGImageReader.java:496)
        at java.desktop/com.sun.imageio.plugins.jpeg.JPEGImageReader.readHeader(JPEGImageReader.java:724)
        at java.desktop/com.sun.imageio.plugins.jpeg.JPEGImageReader.readInternal(JPEGImageReader.java:1130)
        at java.desktop/com.sun.imageio.plugins.jpeg.JPEGImageReader.read(JPEGImageReader.java:1110)
        at java.desktop/javax.imageio.ImageIO.read(ImageIO.java:1468)
        at java.desktop/javax.imageio.ImageIO.read(ImageIO.java:1420)
        at com.example.jetsnack.ui.components.SnackAsyncImageKt$SnackAsyncImage$3$1$1.invokeSuspend(SnackAsyncImage.kt:42)
        at kotlin.coroutines.jvm.internal.BaseContinuationImpl.resumeWith(ContinuationImpl.kt:33)
        at kotlinx.coroutines.DispatchedTask.run(DispatchedTask.kt:108)
        at kotlinx.coroutines.internal.LimitedDispatcher$Worker.run(LimitedDispatcher.kt:115)
        at kotlinx.coroutines.scheduling.TaskImpl.run(Tasks.kt:103)
        at kotlinx.coroutines.scheduling.CoroutineScheduler.runSafely(CoroutineScheduler.kt:584)
        at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.executeTask(CoroutineScheduler.kt:800)
        at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.runWorker(CoroutineScheduler.kt:704)
        at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.run(CoroutineScheduler.kt:691)

Can't run on Linux

Hello,
I'm trying to run compose-imageviewer wasm example.

./gradlew :webApp:wasmRun

Got error:

...

> Task :webApp:wasmBrowserDevelopmentRun FAILED
Caching disabled for task ':webApp:wasmBrowserDevelopmentRun' because:
  Build cache is disabled
Task ':webApp:wasmBrowserDevelopmentRun' is not up-to-date because:
  Task state is not tracked.
Starting process 'command '/home/alexuser/.gradle/nodejs/node-v18.12.1-linux-x64/bin/node''. Working directory: /home/alexuser/Projects/kotlin-wasm-examples/compose-imageviewer/build/js/packages/imageviewer Command: /home/alexuser/.gradle/nodejs/node-v18.12.1-linux-x64/bin/node /home/alexuser/Projects/kotlin-wasm-examples/compose-imageviewer/build/js/node_modules/webpack/bin/webpack.js serve --config /home/alexuser/Projects/kotlin-wasm-examples/compose-imageviewer/build/js/packages/imageviewer/webpack.config.js
Successfully started process 'command '/home/alexuser/.gradle/nodejs/node-v18.12.1-linux-x64/bin/node''
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://10.17.0.34:8080/
<i> [webpack-dev-server] Content not from webpack is served from './kotlin, /home/alexuser/Projects/kotlin-wasm-examples/compose-imageviewer/webApp/build/processedResources/wasm/main' directory
node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: spawn google chrome ENOENT
Error: spawn google chrome ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:289:12)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn google chrome',
  path: 'google chrome',
  spawnargs: [ 'http://localhost:8080/' ]
}

Node.js v18.12.1

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':webApp:wasmBrowserDevelopmentRun'.
> <i> [webpack-dev-server] Project is running at:
  <i> [webpack-dev-server] Loopback: http://localhost:8080/
  <i> [webpack-dev-server] On Your Network (IPv4): http://10.17.0.34:8080/
  <i> [webpack-dev-server] Content not from webpack is served from './kotlin, /home/alexuser/Projects/kotlin-wasm-examples/compose-imageviewer/webApp/build/processedResources/wasm/main' directory
  node:events:491
        throw er; // Unhandled 'error' event
        ^
  
  Error: spawn google chrome ENOENT
  Error: spawn google chrome ENOENT
      at ChildProcess._handle.onexit (node:internal/child_process:283:19)
      at onErrorNT (node:internal/child_process:476:16)
      at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
  Emitted 'error' event on ChildProcess instance at:
  Emitted 'error' event on ChildProcess instance at:
      at ChildProcess._handle.onexit (node:internal/child_process:289:12)
      at onErrorNT (node:internal/child_process:476:16)
      at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
    errno: -2,
    code: 'ENOENT',
    syscall: 'spawn google chrome',
    path: 'google chrome',
    spawnargs: [ 'http://localhost:8080/' ]
  }
  
  Node.js v18.12.1

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See https://docs.gradle.org/7.6/userguide/command_line_interface.html#sec:command_line_warnings

Execution optimizations have been disabled for 1 invalid unit(s) of work during this build to ensure correctness.
Please consult deprecation warnings for more details.

BUILD FAILED in 2s
26 actionable tasks: 3 executed, 23 up-to-date

Any advice much appreciated!

Runtime error in browser-example

I'm trying to run the browser-example out of the box, however it fails with a runtime error (see also screenshot): wasm validation error: at offset 22982: incompatible super type.

This is using Firefox nightly 117.0a1, with the required flags both enabled.

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.