Read Getting Started from the User Manual.
Kweb is a new way to create beautiful, efficient, and scalable websites in Kotlin, where server-browser communication is handled automatically.
import kweb.*
fun main() {
Kweb(port = 16097) {
doc.body {
h1().text("Hello World!")
}
}
}
I was wondering if the FileReader Web API support is possible in such a way that we can, bind a function to the FileReader Load event and get a response in a KVar, to eliminate the need to listen to the event using javascript which then doesn't return anything, and limits us to do our work in there. which unbinds my img element from KVar binded to its 'src' attribute. @sanity referred to the relevant code to make something to support it, but I couldn't get my head around it, any example or help ?
enhancementThe render() function internally uses span as it's container element. Removing it would be a god send, but I don't think there is an easy way to do this so what we can do instead is provide a way for user to give it some custom element as container.
The problem I've stumbled upon goes like this. I want to create dynamically filled dropdown using fomantic. So I did this:
val areaId = KVar("")
div(fomantic.ui.search.selection.dropdown).new {
input(type = InputType.hidden).setValue(areaId, updateOn = "change")
i(fomantic.dropdown.icon)
div(fomantic.menu).new {
render(state.listAreas()) { areas ->
areas.forEach { area -> div(fomatnic.item).setAttributeRaw("data-value", area.id).text(area.name)
}
}
}
This works, but because of the span it doesn't look right (styling is wrong). So instead I think we could do this:
val areaId = KVar("")
div(fomantic.ui.search.selection.dropdown).new {
input(type = InputType.hidden).setValue(areaId, updateOn = "change")
i(fomantic.dropdown.icon)
render(stat.listAreas(), container = div(fomantic.menu)) { areas ->
areas.forEach { area -> div(fomatnic.item).setAttributeRaw("data-value", area.id).text(area.name)
}
}
Tell me what do you think.
enhancement architecture 1.0-blockerNote: While it will require a decent understanding of Kotlin reflection, this is a very self-contained project and thus might be an ideal choice for someone interested in getting their feet wet as a Kweb contributor. If you want to tackle it please comment below to avoid duplicated effort
I've been working on routing, and have an approach that's both relatively simple and I think very powerful.
One thing that would add greatly to it is some code that could convert a URL path like /users/123/friends/94 into an object representation of the path, like Users(id=123, Friend(id = 94)), similar to how Gson converts JSON into object representations and back again.
For example, let's create an object representation of our webapps paths as follows:
sealed class Entity {
data class User(val id : Int, val userEntity : UserEntity) : Entity()
class Root() : Entity()
}
sealed class UserEntity {
class Root() : UserEntity()
data class Friend(val id : Int) : UserEntity()
class Settings() : UserEntity()
}
Note the use of sealed classes, this will be nice when we use when expressions to render the paths.
Here are some paths and the object equivalents:
/users/32 -> Entity.User(32, UserEntity.Root())
/users/152/friends/22 -> Entity.User(152, UserEntity.Friend(22))
/ -> Entity.Root()
Additionally, while defaults should be sensible and consistent with REST conventions for URL format, it should be possible to use annotations to override the default translations from path to object (much as with Gson).
There are specific events that can be tracked only on the document, but it's api doesn't allow listening for events.
For example this event only works when installed on the document: https://developer.mozilla.org/en-US/docs/Web/API/Document/selectionchange_event
Here are all events supported by the document: https://developer.mozilla.org/en-US/docs/Web/API/Document#Events
enhancementHello,
this is my first post on kweb-core. I'm quite excited about the idea of merging server- and client-side programming.
I tested your TODO-example where I saw that the websocket gets quite verbose when filling the input text field, caused by the input.on.keypress event handler code:
input.on.keypress { ke ->
if (ke.code == "Enter") {
//etc.
Woudn't that be a case for onImmediate, I first thought.
As I read on issue #35 , onImmediate works with pre-recording DOM-changes.
As you say in the docs, "the event handler for an onImmediate must limit itself to simple DOM modifications".
Do I suppose correctly that even a simple IF statement like above cannot be used in onImmediate because of its nature to just record the effects when executed once on the server side? You should include this in your warning in the docs.
If positive, is there no other way of offering a better onImmediate experience, for example
Hi, just wondering if there is an example of toggling visibility of views, or maybe removing them all together.
Basically I want something like dropdown menu with dynamically generated elements tied to shoebox, but I'm not sure how to do it properly.
Describe the bug https://www.loom.com/share/34e19d5b30ff4212a1318fa296be7d8b
To Reproduce the svg disappears only when I re-render a component, not at the initial rendering
bugI think this is a workable implementation to get started with this issue.
There's also a syntax detail we will need to make a decision on. If you look at CacheJSTest.kt you will see
browser.executeFromCache("""alert("Hello " + {});""","Derek")
The syntax you put in the issue description, won't work. Not without some modifications at least.
browser.executeFromCache("""alert("Hello {}");""","Derek")
That doesn't work, because right now, I'm just swapping out appearance of "{}" for randomly generated variable names. But, with the syntax written that way, inside the quote marks, javascript won't recognize the variable name.
So, Kweb users will need to treat "{}" as variable names and format their strings correctly, i.e., alert("Hello" + {}), or we will need to add some complexity and "break out" variables. We could parse "Hello {}, how are you?", and change it into "Hello " + variableName + ", how are you?" But, that's more complex then the basic code I wrote to substitute the "{}" so far.
I tried to bind variable of type KVar, but it is not binding to the "src" attribute -
var imageString: KVar<String> = KVar("")
img("").setAttribute("src", imageString)
I also tried -
val imgElement =img("")
imgElement.setAttribute("src", imageString)
But to no avail. the value of imageString doesn't affect the src attribute. not even one directional
I also read the doc about img, and it said, "Kweb doesn't support internal routing yet, use external source". does that mean what I'm trying to achieve is not possible ?
bugHow would that work with query parameters?
I also did not find a convenient way to retrieve query parametes. I ended up with:
fun WebBrowser.queryParameters() =
parseQueryString(httpRequestInfo.requestedUrl.substringAfter("?").substringAfter("%3F"))
However, I was not able to modify the url such that it "hit" the route on the server.
enhancement questionDescribe the bug This code :
val a = a().setAttribute("href", "#")
a.on.click {
println("clicked")
}
works (display "clicked" when clicking on the a element) for 0.10.5 - not anymore for 0.10.6 (seems to route to # instead)
bugHello, I have a strange behavior in which I set my custom head viewport meta but there still is the default tag with id="K_head" (see screenshot below)
fun main() {
Kweb(
port = 8080,
debug = false,
plugins = listOf(
StaticFilesPlugin(ResourceFolder("static"), "/static"),
ViewportPlugin(),
fomanticUIPlugin
)
) {
doc.head.new {
// other head tags
// I tried adding my meta here also, nothing changes
}
doc.body.new {
// routing
}
}
}
Is this behavior normal?
bug staleThere is a risk of session hijacking because client ids are transmitted in plaintext over unencrypted transports while being used to authenticate reconnection in the event of a disconnect.
securityI want to know the spec of the restarting process. Kweb handles the state on the server side, as a result, I want to know what's happing in the server restarting process for deployment on the production environment.
If my understanding is correct, Kweb clears the client state, and clear the input form on the browser after server restarting, right?
architecture documentation reliability staleIf not in Kweb.debug mode, use a JavaScript minimizer like YUI Compressor to compress kweb_bootstrap.js, probably somewhere here.
Note that the various placeholders must survive the minimization, so using commented code for placeholders will probably need to change.
enhancement efficiency good-for-beginnersFull Changelog: https://github.com/kwebio/kweb-core/compare/1.3.3...1.3.4
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/1.3.2...1.3.3
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/1.3.1...1.3.2
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/1.3.0...1.3.1
Source code(tar.gz)We have fixed a minor bug in Kweb where a meta tag was hardwired into all HTML documents. This meta tag should have been user-configurable, either through the DSL or the ViewportPlugin. The meta tag has now been removed.
This is what it was adding:
<head>
...
<meta id="K_head"
name="viewport"
content="width=device-width, initial-scale=1.0">
...
</head>
This change should not have any effect on your website, as the values in the meta tag were the default values anyway.
However, if you do notice any adverse effects of the change you can use the ViewportPlugin with its default settings to add the meta tag back.
To do this use the following code:
import kweb.plugins.viewport.ViewportPlugin
Kweb(port = 1235, plugins = listOf(ViewportPlugin())) { // ...
Changing the visibility of Kweb.clientState was the purpose of the previous release but seems like I screwed up the git push. This should really fix it.
Full Changelog: https://github.com/kwebio/kweb-core/compare/1.2.1...1.2.2
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/1.2.0...1.2.1
Source code(tar.gz)Thanks to @sigmadeltasoftware for suggesting a more concise syntax for components, the old Component interface has been deprecated. See Components in the user manual.
Full Changelog: https://github.com/kwebio/kweb-core/compare/1.1.6...1.2.0
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/1.1.5...1.1.6
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/1.1.4...1.1.5
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/1.1.3...1.1.4
Source code(tar.gz)/ws to /kweb_ws to avoid collisionsFull Changelog: https://github.com/kwebio/kweb-core/compare/1.1.2.1...1.1.3
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/1.1.1...1.1.2
Source code(tar.gz)Provide ElementCreator.elementScope() to create CoroutineScopes that are canceled when the relevant part of the DOM is no-longer used.
Full Changelog: https://github.com/kwebio/kweb-core/compare/1.1.0...1.1.1
Source code(tar.gz)This release changes how Elements are configured on creation. Old approach:
button {
element {
classes("bigbutton")
this["autofocus"] = true
text("Click Me!")
}
}
New approach:
button { btnEl ->
with(btnEl) {
classes("bigbutton")
this["autofocus"] = true
text("Click Me!")
}
}
The element { } block is now deprecated in favor of this approach.
Full Changelog: https://github.com/kwebio/kweb-core/compare/1.0.2.1...1.1.0
Source code(tar.gz)/kweb_static instead of /static for static files to avoid collisions since /static is commonly usedFull Changelog: https://github.com/kwebio/kweb-core/compare/1.0.2...1.0.2.1
Source code(tar.gz)Composable components help manage complexity in a software project by allowing developers to break down a complex problem into smaller, more manageable pieces. Kweb's new Component interface is a simple but powerful abstraction to create reusable UI components in Kweb.
We also have new ways to create KVars and KVals from within the DOM builder DSL that are more resource efficient, see the new KVars and the DOM section in the Kweb Book.
For more read the new Kweb book chapter: Managing Complexity
Full Changelog: https://github.com/kwebio/kweb-core/compare/1.0.1...1.0.2
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/1.0.0...1.0.1
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/0.12.7...1.0.0
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/1.0.0-rc.1...1.0.0-rc.2
Source code(tar.gz)Kweb is a web application framework written in Kotlin for backend developers. It's designed to be lightweight and easy to use, with a focus on efficiency, simplicity, and flexibility.
Read The Kweb Book to learn more and to begin using Kweb.
This means increased confidence that Kweb will work well for you and Kweb version releases won't break your code (without a good reason).
The purpose of this release candidate is to find out. Whether you're new to Kweb or an existing user, please let us know what you think!
Full Changelog: https://github.com/kwebio/kweb-core/compare/0.12.7...1.0.0-rc.1
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/0.12.6...0.12.7
Source code(tar.gz)After much waling and gnashing of teeth we've now got Kweb upgraded from Gradle 6 to the latest Gradle 7.5 - thank you so much to the contributors who helped, particularly @Derek52 and @tcrawford-figure. We've also bumped almost all other dependencies to their latest versions.
We now have a live example of a Kweb site deployed on Google Cloud, using FireStore as a database - set up to auto-deploy with Github Actions:
Full Changelog: https://github.com/kwebio/kweb-core/compare/0.12.5...0.12.6
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/0.12.4...0.12.5
Source code(tar.gz)Full Changelog: https://github.com/kwebio/kweb-core/compare/0.12.3...0.12.4
Source code(tar.gz)Ensure that DOMs are cleaned up when ClientConnection expires.
Source code(tar.gz)Migrated Ktor dependency from v1.6.x to 2.1
Source code(tar.gz)NotyKT ??️ NotyKT is the complete Kotlin-stack note taking ??️ application ?? built to demonstrate a use of Kotlin programming language in server-side
TO-DO Manager TO-DO Manager is a simple note management app. Unlike other apps, TO-DO Manager is free and open source. You can access your nots from a
Valtimo-backend-implementation-template Requirements Ensure docker desktop is in
Project Project to implement the matching of guests and hosts, with special attention to verification of matches. Get it, run it: In order to build th
Stfalcon Fixturer A Utility for developers and QAs which helps minimize time wasting on writing the same data for testing over and over again. You can
React Native File Gateway A React Native library making file access easier for developers as first class citizens, without the tears. ⚠️ NOTE: This li
Flutter NFC Reader & Writer A new flutter plugin to help developers looking to u
Netflix-Clone-React Practising React by building Netflix Clone Requirements TMDB api key : Add TMDB API key to AppApi.kt Learning Resourcce Build Netf
KMP-Sample Kotlin Multiplatform Sample Android iOS Web (Compose for web) Desktop (Compose for desktop) ?? Structure Diagram ?? Build At least android
A Kotlin Multiplatform Project using TMDB Api(https://www.themoviedb.org/). Currently this project is implemented in following platforms Andr
A Kotlin Multiplatform and Compose template that allows you to easily set up your project targeting: Android, Desktop, and Web
Unsplash Unsplash application for Android, Desktop and Web. Built using Kotlin Multiplatform and Compose with ❤️ ?? Presentation Set up the environmen
WordMasterKMP WIP Kotlin Multiplatform sample inspired by Wordle and also Word M
Projeto da disciplina de Linguagem de Programação Funcional 2021.1 (jan/2022) ??
kotpringboot-multimodule-template Table of Contents Overview How to run Overview How to run Run with profiles: Note that default spring profile would
[NEW] Released to Maven Central: 'com.github.yundom:kache:1.x.x' Kache A runtime in-memory cache. Installation Put this in your build.gradle implemen
Easy lightweight SharedPreferences library for Android in Kotlin using delegated properties Idea Delegated properties in Kotlin allow you to execute a
StaticLog StaticLog is a super lightweight logging library implemented in pure Kotlin (https://kotlinlang.org). It is designed to be used in Kotlin, J
Koi - A lightweight Kotlin library for Android Koi include many useful extensions and functions, they can help reducing the boilerplate code in Androi
1.4k Jan 4, 2023
3 Dec 10, 2022
1 Feb 7, 2022
1 Apr 9, 2022
31 Nov 29, 2021
4 Sep 11, 2021
1 Jan 6, 2022
61 Nov 13, 2022
14 Dec 13, 2022
11 Nov 10, 2022
3 Oct 27, 2021
56 Oct 4, 2022
3 Jan 10, 2022
7 Oct 30, 2022
22 Nov 19, 2022
25 Dec 27, 2022
28 Oct 3, 2022
514 Nov 29, 2022