digging_deeper

Documentation

Index

• Variables

Variables

var CompositeNewComponentWithGo = Doc(
	Markdown(`
Any Go function that returns an ~htmlgo.HTMLComponent~ is a component,
Any Go struct that implements ~MarshalHTML(ctx context.Context) ([]byte, error)~ function is an component.
They can be composite into a new component very easy.

This example is ported from [Bootstrap4 Navbar](https://getbootstrap.com/docs/4.3/components/navbar/):
`),
	ch.Code(generated.CompositeComponentSample1).Language("go"),
	utils.Demo("Composite New Component With Go", e00_basics.CompositeComponentSample1PagePath, "e00_basics/composite-components.go"),
	Markdown(`
You can see from the example, We have created ~Navbar~ and ~Carousel~ components by
simply create Go func that returns ~htmlgo.HTMLComponent~.
It is easy to pass in components as parameter, and wrap components.
By utilizing the power of Go language, Any component can be abstracted and reused with enough parameters.

The ~Navbar~ is a responsive navigation header, Resizing your window, the nav bar will react to device window size and change to nav bar popup and hide search form.

For this ~Navbar~ component to work, I have to import Bootstrap assets in this new layout function:
`),
	ch.Code(generated.DemoBootstrapLayoutSample).Language("go"),

	Markdown(`
You can utilize the command line tool [html2go](https://github.com/sunfmin/html2go) to convert existing html code to htmlgo code.
By writing html in Go you get:

- The static type checking
- Abstract out easily to different functions
- Easier refactor with IDE like GoLand
- Loop and variable replacing is just like in Go
- Invoke helper functions is just like in Go
- Almost as readable as normal HTML
- Not possible to have html tag not closed, Or not matched.

Once you have these, Why generate html in any interpreted template language!

`),
).Title("Composite new Component With Go").
	Slug("components-guide/composite-new-component-with-go")

var IntegrateAHeavyVueComponent = Doc(
	Markdown(`
We can abstract any complicated of server side render component with [htmlgo](https://github.com/theplant/htmlgo).
But a lots of components in the modern web have done many things on the client side. means there are many logic
happens before the it interact with server side.

Here is an example, a rich text editor. you have a toolbar of buttons that you can interact, most of them won't
need to communicate with server. We are going to integrate the fantastic rich text editor [tiptap](https://tiptap.scrumpy.io/)
to be used as any ~htmlgo.HTMLComponent~.

**Step 1**: [Create a @vue/cli project](https://cli.vuejs.org/guide/creating-a-project.html):

~~~
$ vue create tiptapjs
~~~

Modify or add a separate ~vue.config.js~ config file,

`),
	ch.Code(generated.TipTapVueConfig).Language("javascript"),

	Markdown(`
- Enable ~runtimeCompiler~ so that vue can parse template html generate from server.
- Made ~Vue~ as externals so that it won't be packed to the dist production js file,
  Since we will be sharing one Vue.js for in one page with other libraries.
- Config svg module to inline the svg icons used by tiptap

**Step 2**: Create a vue component that use tiptap

Install ~tiptap~ and ~tiptap-extensions~ first
~~~
$ yarn add tiptap tiptap-extensions
~~~

And write the ~editor.vue~ something like this, We omitted the template at here.

`),
	ch.Code(generated.TipTapEditorVueComponent).Language("javascript"),
	Markdown(`
We injected the ~this.$plaid()~. that is from ~web/corejs~, Which you will need to use
For every Go Plaid web applications. Here we uses one function ~fieldValue~ from it.
It set the form value when the rich text editor changes. So that later when you call
~EventFunc~ it the value will be posted to the server side. Here we will post the html value.
Also allow component user to set ~fieldName~, which is important when posting the value to the
server.

**Step 3**: At ~main.js~, Use a special hook to register the component to ~web/corejs~

`),
	ch.Code(`import TipTapEditor from './editor.vue'

(window.__goplaidVueComponentRegisters =
	window.__goplaidVueComponentRegisters || []).push((Vue) => {
		Vue.component('tiptap-editor', TipTapEditor)
	});`).Language("go"),
	Markdown(`
**Step 4**: Test the component in a simple html

We edited the ~index.html~ inside public to be the following:

`),
	ch.Code(generated.TipTapDemoHTML).Language("html"),
	Markdown(`
- For ~http://localhost:3500/app.js~ to be able to serve. you have to run ~yarn serve~ in
tiptapjs directory.
- ~http://localhost:3100/app.js~ is QOR5 web corejs vue project.
  So go to that directory and run ~yarn serve~ to start it. and then in
- Run a web server inside tiptapjs directory like ~python -m SimpleHTTPServer~ and point your
  Browser to the index.html file, and see if your vue component can render and behave correctly.

**Step 5**: Use [packr](https://github.com/gobuffalo/packr) to pack the dist folder

We write a packr box inside ~tiptapjs.go~ along side the tiptapjs folder.
`),
	ch.Code(generated.TipTapPackrSample).Language("go"),
	Markdown(`
And write a ~build.sh~ to build the javascript to production version, and run packr to pack
them into ~a_tiptap-packr.go~ file.
`),
	ch.Code(generated.TiptapBuilderSH).Language("bash"),

	Markdown(`
**Step 6**: Write a Go wrapper to wrap it to be a ~HTMLComponent~
`),
	ch.Code(generated.TipTapEditorHTMLComponent).Language("go"),

	Markdown(`
**Step 7**: Use it in your web app

To use it, first we have to mount the assets into our app
`),
	ch.Code(generated.TipTapComponentsPackSample).Language("go"),
	Markdown(`
And reference them in our layout function.
`),
	ch.Code(generated.TipTapLayoutSample).Language("go"),

	Markdown(`
And we write a page func to use it like any other component:
`),
	ch.Code(generated.HelloWorldTipTapSample).Language("go"),

	Markdown(`
And now let's check out our fruits:
`),
	utils.Demo("Integrate a Heavy Vue Component", e00_basics.HelloWorldTipTapPath, "e00_basics/use-tiptap-editor.go"),
).Title("Integrate a heavy Vue Component").
	Slug("components-guide/integrate-a-heavy-vue-component")