flowingcode / commonsdemo Goto Github PK

A hardcoded dependency to Lit 2.5.0 was added to SourceCodeViewer in #25.
It conflicts with Vaadin 24.3 own dependency with Lit 3.x

It would be nice to have one way of specifying the sources so they work in production and development mode.

From #40

The demo always loads code snippets from the configured github branch in the repository, even in development mode (when demos are being modified in IDE). Hence, demos do not reflect the modified sources.

Document the following code-viewer features

• source cleanup (#37)
• show-source and conditional code (#44)
• code block highlighting (#62)
• use of local demo sources in development mode (#46)
• short license header
• github branch selection

Allow to switch light or dark theme in the demos (based on https://cookbook.vaadin.com/os-light-dark-theme)

What is the purpose of this type parameter?

Basically this is not being shown.

@Route(value = "extended-login/login-layout", layout = TestLoginLayout.class)
// show-source @Route("value = "extended-login/login-layout-demo", layout = ExtendedLoginDemoView.class)

As a user, when I click a tab, I would expect that the URL changes so that I'm able to navigate using the back and forward buttons in the browser.

We need an alternative for displaying the addons source code in the demos because the service at https://gist-it.appspot.com/ is down.

It would be great to remove this annotation from the sources view

It would be great to add some kind of support for describing the demos, maybe adding a question mark on each tab of each demo that when clicked it would show a popup explaining each demo

Compilation with Vaadin 14.10.5 fails:

ERROR in /var/jenkins/workspace/AddonsDemo-v14/node_modules/@vaadin/flow-frontend/code-viewer.ts
[tsl] ERROR in /var/jenkins/workspace/AddonsDemo-v14/node_modules/@vaadin/flow-frontend/code-viewer.ts(452,36)
TS7006: Parameter 'elem' implicitly has an 'any' type.

@GithubLink defaults to master branch. If the demo is based on another branhc, the code snippet is not aligned with the actual sources (which is important, in case the API has breaking changes).

@ignore annotation appears in the sources, it should be removed

From #40

Lines with a // hide-source comment are not rendered in the code snippet (#37).
Lines with a // show-source comment are rendered in the code snippet (#42).

What we need now is a way to display "nice" code depending on the framework version.

For instance:

// #if vaadin ge 22
// show-source foo();
// #elif vaadin eq 23
// show-source bar();
// #else
// show-source baz();
// #endif

would be rendered as foo(); in Vaadin 14-22, bar in Vaadin 23 and baz() in Vaadin 24.

Lines with a // hide-source comment are not rendered in the code snippet (#37).

What we need now is a way to display "nice" code as replacement for ugly hacks, which would otherwise make the demo hard to understand.
This feature will be helpful in cases where we use reflection in order to circumvent binary compatibility issues.

For instance, if the demo source is

Method m = Foo.class.getMethod("bar");
m.invoke(foo);

I want to be able to write it as

// show-source foo.bar();
Method m = Foo.class.getMethod("bar"); // hide-source
m.invoke(foo); // hide-source

So that it will be displayed as:

foo.bar();

TabbedDemo uses addThemeVariants, which is not available in some supported versions of the framework

Release failed because of https://github.com/FlowingCode/infrastructure/issues/100 (https://jenkins.flowingcode.com/job/CommonsDemo/169/console)

Steps to reproduce

1. Go to http://127.0.0.1:8080/demo

2. Click "Revered orientation"
   

3. Press F5
   

The implementation of the code highlighter based on PrismJS (commons-demo 3.2.0) is not compatible with Vaadin 21:

(left: Vaadin 14, right: Vaadin 21)

The current implementation of the library allows to display only one source file per demo example. However, there are scenarios where our demo examples may require the inclusion of additional helper classes, such as JavaScript connectors, stylesheets, and other related files. So it would greatly improve the usability and completeness of the library if we could enhance it to support multiple source files within a single demo example.

This kind of enhancement would enable us to:

1. Include essential auxiliary files that are crucial for understanding and running the example effectively.
2. Provide a more comprehensive and informative demonstration of the example's functionality.
3. Enhance the overall user experience by allowing users to access and review all related source files in one place.

Dragging the splitter causes the following error:

Cannot invoke "java.lang.Double.doubleValue()" because "this.splitterPosition" is null

java.lang.NullPointerException: Cannot invoke "java.lang.Double.doubleValue()" because "this.splitterPosition" is null
	at com.vaadin.flow.component.splitlayout.SplitLayout.calcNewSplitterPosition(SplitLayout.java:389)
	at com.vaadin.flow.component.splitlayout.SplitLayout.lambda$new$9b1b5227$2(SplitLayout.java:74)
	at com.vaadin.flow.component.ComponentEventBus.fireEventForListener(ComponentEventBus.java:233)
	at com.vaadin.flow.component.ComponentEventBus.handleDomEvent(ComponentEventBus.java:475)
	at com.vaadin.flow.component.ComponentEventBus.lambda$addDomTrigger$dd1b7957$1(ComponentEventBus.java:292)
	at com.vaadin.flow.internal.nodefeature.ElementListenerMap.lambda$fireEvent$2(ElementListenerMap.java:447)
	at java.base/java.util.ArrayList.forEach(ArrayList.java:1511)
	at com.vaadin.flow.internal.nodefeature.ElementListenerMap.fireEvent(ElementListenerMap.java:447)
	at com.vaadin.flow.server.communication.rpc.EventRpcHandler.handleNode(EventRpcHandler.java:62)
	at com.vaadin.flow.server.communication.rpc.AbstractRpcInvocationHandler.handle(AbstractRpcInvocationHandler.java:74)
	at com.vaadin.flow.server.communication.ServerRpcHandler.handleInvocationData(ServerRpcHandler.java:459)
	at com.vaadin.flow.server.communication.ServerRpcHandler.lambda$handleInvocations$2(ServerRpcHandler.java:440)
	at java.base/java.util.ArrayList.forEach(ArrayList.java:1511)
	at com.vaadin.flow.server.communication.ServerRpcHandler.handleInvocations(ServerRpcHandler.java:440)
	at com.vaadin.flow.server.communication.ServerRpcHandler.handleRpc(ServerRpcHandler.java:323)
	at com.vaadin.flow.server.communication.UidlRequestHandler.synchronizedHandleRequest(UidlRequestHandler.java:114)
	at com.vaadin.flow.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:40)
	at com.vaadin.flow.server.VaadinService.handleRequest(VaadinService.java:1529)
	at com.vaadin.flow.server.VaadinServlet.service(VaadinServlet.java:398)
	at com.vaadin.flow.spring.SpringServlet.service(SpringServlet.java:106)

A couple of suggestions:

• The source code should be disabled by default in mobile devices
• The source code divider should be horizontal in portrait devices by default

In Vaadin 10 demos, we had the convenience of utilizing OpenGraph and Twitter Card metadata protocols to enhance the appearance of shared links on social media platforms:

https://github.com/FlowingCode/AddonsDemoV10/blob/1740baa28923a119d5fbbc014fa25c1356ccf9cd/src/main/java/com/flowingcode/addons/TrackedLayout.java#L73-L95
https://github.com/FlowingCode/AddonsDemoV10/blob/1740baa28923a119d5fbbc014fa25c1356ccf9cd/src/main/java/com/flowingcode/addons/TrackedLayout.java#L73
https://github.com/FlowingCode/AddonsDemoV10/blob/1740baa28923a119d5fbbc014fa25c1356ccf9cd/src/main/java/com/flowingcode/vaadin/addons/carousel/TrackedDemoView.java

This functionality was removed in Vaadin 14+ demos because views are now directly sourced from each repository.

Would be nice to have the possibility to show the source code on the left side if needed. By default source code should be shown in the right side.