# kotlinjs Published articles for kotlinjs. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Measuring and analyzing the KotlinJS bundle size - Gustavo Fão Valvassori DevFeed: [Measuring and analyzing the KotlinJS bundle size - Gustavo Fão Valvassori]() Original publisher: [Read original article]() Published: 2024-02-16T00:00:00Z Content type: tutorial Language: en Sources: [Touchlab | Enterprise Mobile Innovation & Development]() Topics: [kotlinjs](), [Webpack](), [JavaScript](), [Web Development]() Tags: [analyze](), [article](), [devtools](), [gradle](), [gradle-plugin](), [javascript](), [kotlin-js](), [kotlinjs](), [lighthouse](), [measuring](), [performance]() ### AI overview This tutorial explains how KotlinJS projects are compiled into JavaScript and bundled with Webpack. It presents two ways to measure and analyze bundle size: examining source maps with SourceMapExplorer or Chrome Lighthouse, and using WebpackBundleAnalyzer. ### Source excerpt Smaller JavaScript bundle size helps improve a website's loading speed and performance. In this article, we present two different ways of analyzing and measuring KotlinJS bundle size. ## Different ways to distribute and integrate Kotlin/JS library DevFeed: [Different ways to distribute and integrate Kotlin/JS library]() Original publisher: [Read original article]() Author: Jigar Brahmbhatt Published: 2022-07-11T20:24:11Z Content type: tutorial Language: en Sources: [Touchlab]() Topics: [Kotlin](), [Library](), [Gradle](), [JavaScript](), [Webpack](), [npm](), [TypeScript](), [browser]() Tags: [browser](), [coding](), [community](), [development](), [engineering](), [gradle](), [inclusive](), [javascript](), [kotlin](), [kotlinjs](), [kotlinmultiplatform](), [library](), [npm](), [software](), [typescript](), [webpack]() ### AI overview A tutorial on distributing and integrating Kotlin/JS libraries in a Kotlin Multiplatform setup. It explains browser and Node.js targets, library and executable binaries, Gradle distribution tasks, Webpack bundles, and publishing output as an npm module with JavaScript and TypeScript usage. ### Source excerpt Note that examples in this post use Kotlin 1.7.0 In the previous post in the Kotlin/JS series, we learned about @JsExport to expose Kotlin code on the JS side. Now, we would look at various ways to distribute a JS library code through a KMP setup. Table Of Contents Gradle Setup Webpack Node Module npm-publish Using the library Use webpack executable HTML JavaScript TypeScript Use as node module HTML JavaScript TypeScript Gradle Setup If you don't already have a JS target in your KMP library project, then you should check out this blog post first. Let's look at common options to use for JS target, js(IR) { browser() nodejs() binaries.library() binaries.executable() } browser() It sets the JavaScript target execution environment as browser. It provides a Gradle task--jsBrowserTest that runs all js tests inside the browser using karma and webpack. nodejs() It sets the JavaScript target execution environment as nodejs. It provides a Gradle task--jsNodeTest that runs all js tests inside nodejs using the built-in test framework. binaries.library() It tells the Kotlin compiler to produce Kotlin/JS code as a distributable node library. Depending on which target you've used along with this, you would get Gradle tasks to generate library distribution files. Kotlin browser tasks -------------------- jsBrowserDevelopmentLibraryDistribution jsBrowserDevelopmentLibraryPrepare jsBrowserProductionLibraryDistribution jsBrowserProductionLibraryPrepare Kotlin node tasks ----------------- jsNodeDevelopmentLibraryDistribution jsNodeDevelopmentLibraryPrepare jsNodeDevelopmentRun jsNodeProductionLibraryDistribution jsNodeProductionLibraryPrepare jsNodeProductionRun jsNodeRun EitherjsBrowserProductionLibraryDistribution or jsNodeProductionLibraryDistribution task generates output files in /build/productionLibrary folder binaries.executable() It tells the Kotlin compiler to produce Kotlin/JS code as webpack executable .js files. Enabling this option generates the following Grad ## @JsExport guide for exposing Kotlin to JS DevFeed: [@JsExport guide for exposing Kotlin to JS]() Original publisher: [Read original article]() Author: Jigar Brahmbhatt Published: 2022-03-14T16:19:31Z Content type: tutorial Language: en Sources: [Touchlab]() Topics: [Kotlin](), [JavaScript]() Tags: [coding](), [community](), [compiler](), [development](), [engineering](), [experimental](), [guide](), [inclusive](), [javascript](), [kotlin](), [kotlinjs](), [kotlinmultiplatform](), [software]() ### AI overview A guide to exposing Kotlin code to JavaScript through Kotlin/JS using the experimental @JsExport annotation. It explains that Kotlin declarations are hidden from JavaScript by default, demonstrates annotating a Greeting class, and notes that the generated .js and .d.ts files then include the class reference. ### Source excerpt Note that this post focuses on JS output for Kotlin. There is also a Typescript output (.d.ts file) with some unique issues that this post doesn't cover in detail. In the previous post, we added Kotlin/JS support to an existing KMM library. Now, we would add code that works on the JS side. Table Of Contents Usage @ExperimentalJsExport vs @JsExport Limitations Collections Long Interface Solution - Using Implementation class Solution - Using Expect-Actual Enum Sealed classes Code mangling Suspended functions Usage It is critical to understand @JsExport annotation and all the issues around it if you expose Kotlin code through Kotlin/JS as an external JS library With the new IR compiler, Kotlin declarations do not get exposed to JavaScript by default. To make Kotlin declarations visible to JavaScript, they must be annotated with @JsExport. Note that @JsExport is experimental as of the posted date of this post (with Kotlin 1.6.10) Let's start with a very basic example, // commonMain - Greeting.kt class Greeting { fun greeting(): String { return "Hello World!" } } At this point, the generated .js library file would not have any reference to the Greeting class. The reason is that it is missing the @JsExport annotation. You can generate JS library code via ./gradlew jsBrowserDistribution. You would find the .js, .d.ts and map file in root/build/js/packages//kotlin folder. Now, add the annotation to generate JS code for it, import kotlin.js.ExperimentalJsExport import kotlin.js.JsExport @ExperimentalJsExport @JsExport class Greeting { fun greeting(): String { return "Hello World!" } } The .js and .d.ts files would now contain the Greeting reference. Generated .js file ```javascript function Greeting() { } Greeting.prototype.greeting = function () { return 'Hello World!'; }; Greeting.$metadata$ = { simpleName: 'Greeting', kind: 'class', interfaces: [] }; - **Generated .d.ts file** ```typescript export namespace jabbar.jigariyo.kmplibrary { class Greeting { constr