Unity Conversion

Uiy Uiy

Posted Sat, 08 Oct 2016 18:49:29 GMT

he problem with vibe.d is lack of integration with commercial tools. Hell, your lucky if you find something that works with jade.

To circumvent this, it should be quite easy have converters that convert the vibe.d site in to the pure html/css/javascript so it can be edited then a convertor to convert back to dt.

This way, one can, say, run a web site editor on the site to make visual changes then have then propagate to the site properly.

To do this effectively, Essentially all the html elements of a diet template will propagate to the html elements one to one but one will have to handle the d code in the templates effectively and with the ability to revert back. This shouldn't be too hard to do by just embedding the d code in the html through a special comment or tag. It would be nice to actually execute the code to get a visual example and insert it in to the html but some type of marking would be required to know what is what.

e.g.,

input:

doctype html
html

head
	title This is the page title
body
	#main This is a &lt;div&gt; with the id 'main'.
		p#first This paragraph has the id 'first'.
		p.second.red This paragraph has the classes 'second' and 'red' assigned.
		p The following paragraph will have an '8' as its content:
		p= 5+3
		p It's also possible to output raw HTML from a D expression:
		p!= "<u>Underlined text</u>"
		p(style="color:red", title='Attribute example') HTML attributes can be specified.
		p#second.test(style="color:green") Id, classes and attributes can also be combined.
                    - some D code with output ("<p> test </p>")

output:
<!DOCTYPE html>
<html>

<head>
	<title>This is the page title</title>
</head>
<body>
	<div id="main">
		This is a &lt;div&gt; with the id 'main'.
		<p id="first">This paragraph has the id 'first'.</p>
		<p class="second red">This paragraph has the classes 'second' and 'red' assigned.</p>
		<p>The following paragraph will have an '8' as its content:</p>
		<p>8</p>
		<p>It's also possible to output raw HTML from a D expression:</p>
		<p><u>Underlined text</u></p>
		<p style="color:red" title="Attribute example">HTML attributes can be specified.</p>
		<p id="second" class="test" style="color:green">Id, classes and attributes can also be combined.</p>
                    <!--D.126 some D code with output ("<p> test </p>") --!>
                    <!--D.126.Output--!>
                    <p> test </p>
                    <!--D.126.Output--!>
	</div>
</body>

</html>

translated output:
doctype html
html

head
	title This is the page title
body
	#main This is a &lt;div&gt; with the id 'main'.
		p#first This paragraph has the id 'first'.
		p.second.red This paragraph has the classes 'second' and 'red' assigned.
		p The following paragraph will have an '8' as its content:
		p= 5+3
		p It's also possible to output raw HTML from a D expression:
		p!= "<u>Underlined text</u>"
		p(style="color:red", title='Attribute example') HTML attributes can be specified.
		p#second.test(style="color:green") Id, classes and attributes can also be combined.
                    - some D code with output ("<p> test </p>")

So, the html to dt is not difficult I imagine, but the dt to html would require some way to convert the d code properly. I think embedding the D code and replacing it with valid values should allow for proper reversal.

Any ideas? The main draw back I have with vibe.d is not being able to use any wysiwyg editors and other pre-existing code. Once you go vibe.d you can't go back ;/ (not easily at least)

Having such a tool should allow vibe.d to leverage all the pre-existing frameworks and tools which will add a whole level of design capabilities that it doesn't currently haven. (ideally we would have a IDE for dt templates and vibe.d sites but I doubt that has any chance of happening)

Sönke Ludwig

Posted Mon, 10 Oct 2016 15:05:27 GMT in reply to Uiy Uiy

On Sat, 08 Oct 2016 18:49:29 GMT, Uiy Uiy wrote:

he problem with vibe.d is lack of integration with commercial tools. Hell, your lucky if you find something that works with jade.

To circumvent this, it should be quite easy have converters that convert the vibe.d site in to the pure html/css/javascript so it can be edited then a convertor to convert back to dt.

This way, one can, say, run a web site editor on the site to make visual changes then have then propagate to the site properly.

To do this effectively, Essentially all the html elements of a diet template will propagate to the html elements one to one but one will have to handle the d code in the templates effectively and with the ability to revert back. This shouldn't be too hard to do by just embedding the d code in the html through a special comment or tag. It would be nice to actually execute the code to get a visual example and insert it in to the html but some type of marking would be required to know what is what.

e.g.,

input:
doctype html
html
	head
		title This is the page title
	body
		#main This is a &lt;div&gt; with the id 'main'.
			p#first This paragraph has the id 'first'.
			p.second.red This paragraph has the classes 'second' and 'red' assigned.
			p The following paragraph will have an '8' as its content:
			p= 5+3
			p It's also possible to output raw HTML from a D expression:
			p!= "Underlined text"
			p(style="color:red", title='Attribute example') HTML attributes can be specified.
			p#second.test(style="color:green") Id, classes and attributes can also be combined.
 - some D code with output (" test ")
output:
<!DOCTYPE html>
<html>
	<head>
		<title>This is the page title</title>
	</head>
	<body>
		<div id="main">
			This is a &lt;div&gt; with the id 'main'.
			This paragraph has the id 'first'.
			This paragraph has the classes 'second' and 'red' assigned.
			The following paragraph will have an '8' as its content:
			8
			It's also possible to output raw HTML from a D expression:
			Underlined text
			HTML attributes can be specified.
			Id, classes and attributes can also be combined.
 <!--D.126 some D code with output (" test ") --!>
 <!--D.126.Output--!>
 test 
 <!--D.126.Output--!>
		</div>
	</body>
</html>
translated output:
doctype html
html
	head
		title This is the page title
	body
		#main This is a &lt;div&gt; with the id 'main'.
			p#first This paragraph has the id 'first'.
			p.second.red This paragraph has the classes 'second' and 'red' assigned.
			p The following paragraph will have an '8' as its content:
			p= 5+3
			p It's also possible to output raw HTML from a D expression:
			p!= "Underlined text"
			p(style="color:red", title='Attribute example') HTML attributes can be specified.
			p#second.test(style="color:green") Id, classes and attributes can also be combined.
 - some D code with output (" test ")
So, the html to dt is not difficult I imagine, but the dt to html would require some way to convert the d code properly. I think embedding the D code and replacing it with valid values should allow for proper reversal.

Any ideas? The main draw back I have with vibe.d is not being able to use any wysiwyg editors and other pre-existing code. Once you go vibe.d you can't go back ;/ (not easily at least)

Having such a tool should allow vibe.d to leverage all the pre-existing frameworks and tools which will add a whole level of design capabilities that it doesn't currently haven. (ideally we would have a IDE for dt templates and vibe.d sites but I doubt that has any chance of happening)

Another possibility is to use one of the text based template languages available (e.g. one of the Mustache dialects: http://code.dlang.org/search?q=mustache). Apart from the missing integration with registerWebInterface - you'd need to declare an explicit HTTPServerResponse parameter, those can be used as a full replacement.

But for a conversion tool, I'd try to go for a similar output syntax, e.g.:

<!doctype html>
<html>
  <head>
    <title>This is the page title</title>
  </head>
  <body>
    <div id="main">This is a &lt;div&gt; with the id 'main'.</div>
    <p id="first">This paragraph has the id 'first'.<p>
    <p class="second red">This paragraph has the classes 'second' and 'red' assigned.</p>
    <p>The following paragraph will have an '8' as its content:</p>
    <p>{{5+3}}</p>
    <p>It's also possible to output raw HTML from a D expression:</p>
    <p>{{{"<u>Underlined text</u>"}}}</p>
    <p style="color:red" title="Attribute example">HTML attributes can be specified</p>
    <p id="second" class="test" style="color:green">Id, classes and attributes can also be combined.</p>
    <!--BEGINCODE: some D code with output ("<p> test </p") }} -->
    <!--ENDCODE-->
  </body>
</html>

Some features of Mustache are not translatable to Diet and vice-versa, so this wouldn't be a reversible transform. Also, some notations are ambiguous, so translating back to Diet wouldn't necessarily result in the same style (e.g. p= 1+3 is the same as p #{1+3}).

However, there are two features which are much more difficult to translate back: blocks/extensions and includes. Since they are a higher level feature, the best that would be possible without some really involved logic would be, during the HTML->Diet conversion, to simply ignore the parts that come from included or extended files and just look at parts from the top level Diet file. The individual parts would have to be marked appropriately with something like ,  and ....

BTW, personally I'm a fan of direct text editing and consequently of having language features that make this more efficient/less redundant. So things like this haven't been a priority for me.

Re: Unity Conversion