merkle-open / gondel Goto Github PK

To allow us more flexibility and be a little bit more correct we should rename the event of the media queries plugin event name from viewportChanged to viewportEntered.

Also we should export the event name as variable so that we get type safety and a future dev will understand the source of the event:

 import {VIEWPORT_ENTERED} from '@gondel/plugin-media-queries';

@EventListener(VIEWPORT_ENTERED)

We could also provide a viewportEvents enum instead:

 import {viewportEvents} from '@gondel/plugin-media-queries';

@EventListener(viewportEvents.viewportChanged)
// or
@EventListener(viewportEvents.VIEWPORT_CHANGED)

Type of issue

• Bug report

The issue refers to:

• the gondel core

Expected behavior

Loading the gondel core library multiple times should still trigger a click event only once per click.

Current behavior

If the gondel core library is loaded multiple times a click event is fired multiple times for a single click.

The reason for this bug is the GondelDecorators plugin which hooks itself multiple times in the start event.

There is already a code which tries to prevent this bug however it uses a local variable which will not prevent the bug if gondel is included in multiple different files:
https://github.com/namics/gondel/blob/b00e01157f11b8eb886f6b11d4d8f22d02d00bb3/packages/core/src/GondelDecorators.ts#L23

Steps to reproduce the behavior

1. Include gondel/core twice
2. Create a simple button component with a click listener.
3. Click the button
4. You will see that the click listener is fired twice

Possible solution:

Use a global window variable instead of a local variable

According to https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types (and various other sources) the MIME type for json is application/json yet

When we changed the MIME type in our project the JSON was no longer found. I propose we change the lookup to preferably look for application/json.

https://github.com/Rich-Harris/agadoo

The method unwrapPromiseApp inside @gondel/plugin-react is not used anymore and should be removed.

Type of issue

• Documentation issue or request

The issue refers to:

• the gondel core
• a gondel plugin

Update documentation and examples to get ready for 1.0 release

To make it easier to get started with gondel @Component should have a side effect to start the entire namespace on domReady

We should also add a way to opt out from auto starting

Type of issue

• Dependencies

The issue refers to:

• The gondel hot plugin

Description

"react" and "react-dom" are not needed as peer dependencies, right?

i would like to eliminate the necessity of using data-attributes and use custom elements custom-elements-spec instead. Custom elements need to be polyfilled https://github.com/WebReflection/document-register-element#document-register-element

JS:

@component("SuperButtonExtreme") // customElements.define("super-button-extreme", SuperButtonExtreme);
class SuperButtonExtreme extends GondelBaseComponent {
//...
}

Html:

<super-button-extreme text="super power" />

Type of issue

• Feature request

The issue refers to:

• the gondel core

With the events all being attached to the html, when having an event handler, the property even.currentTarget always returns the html element.

Quite often, the element which triggers the event contains sub elements. E.g. a button containing a span. When you need to be sure, that you get the button element within your event handler, you currently need to add some extra logic, see stackblitz for details: https://stackblitz.com/edit/gondel-target-vs-currenttarget

Extend the event object to have a custom property on it which contains the original currentTarget, e.g. the element, which the event was added onto.

Once docusaurus is deployed we should set up a domain

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request

Current behavior

After a few POC tests with Gondel and Angular 6 I found out that Gondel already basically works in combination with Angular. However, there are some (important) features missing. Atm. you are not able to communicate between Angular and Gondel components or receive any access to the angular internal stuff because there is no shared API or connection.

Expected behavior

There should also be a helper implementation inspired by the @gondel/plugin-react package which allows us to communicate between Angular and Gondel.

What is the motivation / use case for changing the behavior?

We should be prepared to use Gondel together with the most popular frameworks on the market.

Type of issue

• Bug report

  "@gondel/core": "0.1.0",
  "@gondel/plugin-hot": "0.1.0",

Expected behavior

When i click on a button within the parent component the public event is triggered on the child components as well.

Current behavior

A event triggered by triggerPublicEvent on a parent component won't be triggered on a child component.

Steps to reproduce the behavior

<div data-g-name="ParentComponent">
	<div class="m-parent-component__children-wrapper">
		<div data-g-name="ChildComponent">
		</div>
		<div data-g-name="ChildComponent">
		</div>
		<div data-g-name="ChildComponent">
		</div>
	</div>

	<div class="m-parent-component__child-switcher">
		<button class="m-parent-component__child-switch" data-index="1" />
		<button class="m-parent-component__child-switch" data-index="2" />
		<button class="m-parent-component__child-switch" data-index="3" />
	</div>
</div>

export enum Selectors {
	SLIDE_INDICATOR = '.m-parent-component__child-switch'
}

export enum Events {
	SLIDE_ENABLED = 'gParentComponent.slideEnabled'
}

export enum States {
	ACTIVE = 'state--m-child-component-active'
}

@Component('ParentComponent')
export class ParentComponent extends GondelBaseComponent {
	@EventListener('click', Selectors.SLIDE_INDICATOR)
	_handleClick(event) {
		console.log('ParentComponent._handleClick');

		triggerPublicEvent(Events.SLIDE_ENABLED, this);
	}
}

@Component('ChildComponent')
export class ChildComponent extends GondelBaseComponent {

	@EventListener(Events.SLIDE_ENABLED)
	_handleSlideEnabled(event) {
		console.log('_handleSlideEnabled');
		this._ctx.classList.add(States.ACTIVE);
	}
}

Right now the media queries plugin is using a function to find all running gondel instances for a given event name:
https://github.com/namics/gondel/blob/73a497cc8a4afe91711f00bcacead138dec741e8/packages/plugins/media-queries/src/index.ts#L12-L31

Gondel already provide getHandlers but getHandlers is limited to events which bubble through the listening component:
https://github.com/namics/gondel/blob/73a497cc8a4afe91711f00bcacead138dec741e8/packages/core/src/GondelEventRegistry.ts#L56-L121

We should discuss if it would be possible to move the code from @gondel/media-queries to @gondel/core

Description

If you want to get a component by DOM node (e.g. child component "MyButton") you have to cast the element with the as ... operator. We could add generic typings to the utilities to provide a simple API to automatically cast the "any" component to the right component class.

Example

import MyButton from './MyButton';

export class App extends React.Component<Props, {}> {
  private buttonRef: Element;
  private buttonComponent: MyButton;

  componentDidMount() {
    startComponents(this.buttonRef);
    // current way: getComponentByDomNode(this.buttonRef) as MyButton;
    this.buttonComponent = getComponentByDomNode<MyButton>(this.buttonRef)!;
    this.buttonComponent._ctx.addEventListener('click', () => alert('Hey!'));
  }

  render() {
     return (
       <h2>Hello World</h2>
       <MyButton text="Say hello!" ref=(ref => this.buttonRef = ref) />
     );
  }
}

Issue:
The examples no longer work in CodeSandbox environments.
Current Error message: "Invalid Host Header"

Current solution:
The examples are pulled directly from the GitHub repo (CodeSandbox pulls from master branch).
However, Code-Sandbox is constantly being modified, so these examples are currently no longer working.

Wanted
Maybe we'll get this solution working again.
Also ideas are welcome for alternative solutions.

Type of issue

• Feature request

The issue refers to:

• the gondel core

I think it would be quite useful if Gondel supported lazy loading / lazy initialization, i.e., you'd register a component somewhere globally by providing a factory, e.g.:

import {registerFactories} from '@gondel/core';
const factories = {
    'Button': () => import('Button').then(m => m.ButtonComponent),
    'List': () => import('List').then(m => m.ListComponent)
};
registerFactories(factories);

What I'd imagine to happen would be that Gondel evaluates the given closures as soon as seeing a data-g-name='Button' on the page. Tools like Webpack or Rollup could handle the chunking.

This would be beneficial when a lot of components are placed in the bundle or the components itself would be rather large.

I don't know how much refactoring would need to be done or if this is possible with the current API already (couldn't find this in the docs). Also, some thought will probably have to be put into plugins like hot reloading, etc. Is this even architecturally possible?

What do you guys think?

GondelJqueyComponent should be named GondelJqueryComponent