WebConfig - a vibe.d HTML form generator & validator from D structs

WebFreak001 via Digitalmars-d-announce digitalmars-d-announce at puremagic.com
Thu Jul 20 08:57:55 PDT 2017


I just released a vibe.d library that allows you to turn any D 
struct into an editable HTML5 compatible form with live JS 
updates but also normal no-JS updates with nearly the same 
experience. It basically feels like you don't need to write any 
boilerplate HTML code anymore but instead write D and show your D 
code with a fancy mask automatically to the user. Additionally it 
handles all the validation for you so you can be sure that 
anything the user couldn't type in into the HTML frontend won't 
be stored inside the backend struct (validation & some 
corrections for all HTML5 input types).

It supports numerous data types as input types:
* string - type="text" (there are UDAs to also change the type of 
a string to email, url, time, week, month, datetime-local, date, 
color or textarea)
* bool - type="checkbox"
* enum - a dropdown list (select) or with an UDA a list of radio 
elements
* BitFlags!enum - a list of checkbox elements
* DateTime (not SysTime) which is a timezone-less Date & Time 
combination, can be done with a string too
* Date - type="date", can be done with a string too
* TimeOfDay - type="time", can be done with a string too
* URL (vibe.d) - type="url", can be done with a string too
* integer & floating point types - type="number" or with an UDA 
type="slider"

the input names are automatically generated by the variable name 
(myInputName or my_input_name -> My Input Name) but can also be 
renamed and with v1.1.0 also translated (i18n) using the upcoming 
"language" property in vibe.d WebInterfaces, you can depend on 
vibe.d ~master to use it already now, otherwise everything will 
default to one language for now. You can also translate or rename 
enum values with these UDAs (sadly you need to attach them on the 
member variable because enums can't have UDAs attached to them) 
which is great for having a large variety of supported languages 
on your website.

A use case for the package is for example a user setting:

A user accesses GET /settings and your app looks up the user 
account and the settings struct saved with it, then just passes 
the struct without any other obstacles into renderSettings() and 
it will output prefilled HTML + JS for the user to edit. You just 
need to accept POST /settings and POST /api/setting and pass both 
of them into req.processSettings(ref config) which does 
everything for you. Then it will return a bitfield of changed 
values (up to 64 fields) that you can check if you actually need 
to save the updated config. On the no-js version you will also 
pass that bitfield into the renderer and it will show error 
strings with it.

Another use case would be a small game server front end 
configuration without a lot of thought or changes needing to go 
into it. Just send the struct through the render and process 
functions and don't care about validation and HTML.

By default there is no CSS but the layout is very simple (check 
the GitHub README), but I have a simple material design CSS 
template you can use if you want a quick and simplistic UI for 
your form.

I haven't covered everything the UDAs allow you to do yet or how 
you can customize the HTML generation, etc. but you can check out 
the Documentation[1] and the GitHub repository[2] to find out 
more.

Install the package:
dub.json "web-config": "~>1.1.0"
dub.sdl dependency "web-config" version="~>1.1.0"
DUB Page: http://web-config.dub.pm

[1] https://webfreak001.github.io/WebConfig/package.html
[2] https://github.com/WebFreak001/WebConfig


More information about the Digitalmars-d-announce mailing list