Merge pull request #233 from JetBrains/alpha-compose-stage

Author: zoobestik

.github/workflows/e2e.yml

@@ -26,16 +26,16 @@ jobs:
 
     steps:
       # prepare core binaries
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 20
           cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn
+        run: yarn install --frozen-lockfile # optional, --immutable
 
       # run lint
       - name: Run tests
@@ -49,7 +49,7 @@ jobs:
           echo version=$(npm info @playwright/test version) >> $GITHUB_OUTPUT
 
       - name: Cache Playwright binaries
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: playwright-cache
         with:
           path: |
@@ -75,12 +75,13 @@ jobs:
       - name: Run tests
         run: TEST_PROJECT_LIST="${{matrix.TEST_PROJECT_LIST}}" yarn test
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
-          name: playwright-report
+          name: "playwright-report-${{ matrix.os }}"
           path: |
             test-results/
             playwright-report/
             tests/**/__screenshots__/github_*
           retention-days: 5
+          compression-level: 9

.nvmrc

@@ -1 +1 @@
-18
+20

examples.md

@@ -136,6 +136,120 @@ fun main(args: Array<String>) {
 
 </div>
 
+You can use Compose Wasm.
+
+```html
+<div class="kotlin-code" data-target-platform="compose-wasm"></div>
+```
+<div class="kotlin-code" data-target-platform="compose-wasm">
+
+```kotlin
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.Button
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+
+//sampleStart
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+  CanvasBasedWindow { App() }
+}
+
+@Composable
+fun App() {
+  MaterialTheme {
+    var greetingText by remember { mutableStateOf("Hello World!") }
+    var showImage by remember { mutableStateOf(false) }
+    var counter by remember { mutableStateOf(0) }
+    Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+      Button(onClick = {
+        counter++
+        greetingText = "Compose: ${Greeting().greet()}"
+        showImage = !showImage
+      }) {
+        Text(greetingText)
+      }
+      AnimatedVisibility(showImage) {
+        Text(counter.toString())
+      }
+    }
+  }
+}
+
+private val platform = object : Platform {
+
+  override val name: String
+    get() = "Web with Kotlin/Wasm"
+}
+
+fun getPlatform(): Platform = platform
+
+class Greeting {
+  private val platform = getPlatform()
+
+  fun greet(): String {
+    return "Hello, ${platform.name}!"
+  }
+}
+
+interface Platform {
+  val name: String
+}
+//sampleEnd
+
+```
+
+</div>
+
+
+You can try Kotlin export to Swift.
+
+```html
+<div class="kotlin-code" data-target-platform="swift-export" data-version="2.0.0-RC3"></div>
+```
+<div class="kotlin-code" data-target-platform="swift-export" data-version="2.0.0-RC3">
+
+```kotlin
+fun mul(a: Int, b: Int): Int {
+    return a * b
+}
+
+fun main(args: Array<String>) {
+    print(mul(-2, 4))
+    println(" + 7 =")
+    print(mul(-2, 4) + 7)
+}
+```
+
+</div>
+
+<div class="kotlin-code" data-target-platform="swift-export" data-version="2.0.0-RC3" theme="kotlin-docs">
+
+```kotlin
+fun mul(a: Int, b: Int): Int {
+    return a * b
+}
+
+fun main(args: Array<String>) {
+    print(mul(-2, 4))
+    println(" + 7 =")
+    print(mul(-2, 4) + 7)
+}
+```
+
+</div>
 
 Use `data-target-platform` attribute with value `junit` for creating examples with tests:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kotlin-playground",
-  "version": "1.30.0",
+  "version": "1.32.0",
   "description": "Self-contained component to embed in websites for running Kotlin code",
   "keywords": [
     "kotlin",
@@ -15,38 +15,38 @@
     "!dist/REMOVE_ME.js*"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.21.5",
-    "@babel/core": "^7.22.1",
-    "@babel/plugin-transform-runtime": "~7.22.4",
-    "@babel/preset-env": "~7.22.4",
-    "@babel/runtime-corejs2": "~7.22.2",
-    "@playwright/test": "^1.40.1",
-    "@typescript-eslint/eslint-plugin": "^6.4.0",
-    "@typescript-eslint/parser": "^6.4.0",
-    "babel-loader": "^9.1.3",
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.25.9",
+    "@babel/runtime-corejs2": "^7.25.9",
+    "@playwright/test": "^1.48.1",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "babel-loader": "^9.2.1",
     "babel-plugin-async-to-promises": "^1.0.5",
     "ci-publish": "^1.3.1",
-    "codemirror": "^5.49.0",
+    "codemirror": "^5.65.18",
     "css-loader": "^6.8.1",
     "debounce": "^1.2.0",
     "deepmerge": "^1.5.0",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.5",
     "es6-promise": "^4.2.6",
     "es6-set": "^0.1.5",
     "escape-html": "^1.0.3",
-    "eslint": "^8.47.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "fast-async": "7",
     "fast-deep-equal": "^3.1.3",
     "file-loader": "^6.2.0",
     "flatten": "^1.0.2",
     "github-markdown-css": "^3.0.1",
-    "html-webpack-plugin": "^5.5.3",
+    "html-webpack-plugin": "^5.6.3",
     "husky": "^8.0.3",
     "is-empty-object": "^1.1.1",
-    "lint-staged": "^15.0.2",
+    "lint-staged": "^15.2.10",
     "lz-string": "^1.4.4",
     "markdown-it": "^12.3.2",
     "markdown-it-highlightjs": "^3.0.0",
@@ -55,23 +55,23 @@
     "monkberry-directives": "4.0.8",
     "monkberry-events": "4.0.8",
     "monkberry-loader": "4.0.9",
-    "postcss": "^8.4.31",
-    "postcss-loader": "^7.3.3",
-    "prettier": "^3.0.3",
+    "postcss": "^8.4.47",
+    "postcss-loader": "^7.3.4",
+    "prettier": "^3.3.3",
     "query-string": "^6.5.0",
-    "sass": "^1.66.0",
-    "sass-loader": "^13.3.2",
+    "sass": "^1.80.4",
+    "sass-loader": "^13.3.3",
     "shelljs": "^0.8.3",
-    "style-loader": "^3.3.3",
+    "style-loader": "^3.3.4",
     "svg-fill-loader": "^0.0.8",
     "svg-url-loader": "^8.0.0",
-    "ts-loader": "^9.4.4",
-    "typescript": "^5.1.6",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.6.3",
     "url-search-params": "1.1.0",
-    "webpack": "^5.88.2",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
-    "whatwg-fetch": "^3.0.0"
+    "webpack-dev-server": "^4.15.2",
+    "whatwg-fetch": "^3.6.20"
   },
   "scripts": {
     "build": "webpack",
@@ -80,12 +80,13 @@
     "copy-examples": "node utils/copy-examples",
     "release:ci": "rm -rf dist && npm run build:all && $NPM_TOKEN=%env.NPM_TOKEN% npm publish",
     "start": "webpack-dev-server --port 9002",
-    "start-with-local-compiler": "webpack-dev-server --port 9002 --env webDemoUrl='//localhost:8080'",
+    "start-with-local-compiler": "webpack-dev-server --port 9002 --env webDemoUrl='//localhost:8080' webDemoResourcesUrl='//localhost:8081'",
     "lint": "eslint . --ext .ts",
     "fix": "eslint --fix --ext .ts .",
     "test": "npm run build:all && npm run test:run",
     "test:run": "playwright test",
-    "test:server": "node tests/utlis/server/index.js",
+    "test:server": "node tests/utils/server/index.js",
     "prepare": "husky install"
-  }
+  },
+  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }

src/config.js

@@ -1,17 +1,22 @@
-import {getConfigFromElement, getCurrentScript} from './utils';
-import {TargetPlatforms} from "./utils/platforms";
+import { getConfigFromElement, getCurrentScript } from './utils';
+import { TargetPlatforms } from './utils/platforms';
 
 const currentScript = getCurrentScript();
 
-export const RUNTIME_CONFIG = {...getConfigFromElement(currentScript)};
+export const RUNTIME_CONFIG = { ...getConfigFromElement(currentScript) };
 
 /**
  * API Paths
  *
  * @type {{COMPILE: string, COMPLETE: string, VERSIONS: string, JQUERY: string, KOTLIN_JS: string}}
  */
 export const API_URLS = {
-  server: RUNTIME_CONFIG.server || __WEBDEMO_URL__,
+  server: (RUNTIME_CONFIG.server || __WEBDEMO_URL__).replace(/\/$/, ''),
+  composeServer: 'https://compose-stage.sandbox.intellij.net'.replace(
+    /\/$/,
+    '',
+  ),
+
   COMPILE(platform, version) {
     let url;
 
@@ -31,11 +36,17 @@ export const API_URLS = {
       case TargetPlatforms.WASM:
         url = `${this.server}/api/${version}/compiler/translate?ir=true&compiler=wasm`;
         break;
+      case TargetPlatforms.COMPOSE_WASM:
+        url = `${this.composeServer}/api/compiler/translate?compiler=${TargetPlatforms.COMPOSE_WASM.id}`;
+        break;
       case TargetPlatforms.JUNIT:
         url = `${this.server}/api/${version}/compiler/test`;
         break;
+      case TargetPlatforms.SWIFT_EXPORT:
+        url = `${this.server}/api/${version}/${TargetPlatforms.SWIFT_EXPORT.id}/compiler/translate?compiler=swift-export`;
+        break;
       default:
-        console.warn(`Unknown ${platform.id} , used by default JVM`)
+        console.warn(`Unknown ${platform.id} , used by default JVM`);
         url = `${this.server}/api/${version}/compiler/run`;
         break;
     }
@@ -52,12 +63,27 @@ export const API_URLS = {
   get VERSIONS() {
     return `${this.server}/versions`;
   },
+  RESOURCE_VERSIONS() {
+    return `${this.composeServer}/api/resource/compose-wasm-versions`;
+  },
+  SKIKO_MJS(version) {
+    return `${this.composeServer}/api/resource/skiko-${version}.mjs`;
+  },
+  SKIKO_WASM(version) {
+    return `${this.composeServer}/api/resource/skiko-${version}.wasm`;
+  },
+  STDLIB_MJS(hash) {
+    return `${this.composeServer}/api/resource/stdlib-${hash}.mjs`;
+  },
+  STDLIB_WASM(hash) {
+    return `${this.composeServer}/api/resource/stdlib-${hash}.wasm`;
+  },
   get JQUERY() {
     return `https://cdn.jsdelivr.net/npm/jquery@1/dist/jquery.min.js`;
   },
   get KOTLIN_JS() {
     return `https://cdn.jsdelivr.net/npm/kotlin@`;
-  }
+  },
 };
 
 /**
@@ -70,5 +96,5 @@ export default {
    * Will be calculated according to user defined `data-min-compiler-version`
    * attribute and WebDemo API response
    */
-  compilerVersion: undefined
-}
+  compilerVersion: undefined,
+};