silind-software / direflow Goto Github PK

View Code? Open in Web Editor NEW

501.0 501.0 77.0 6.46 MB

🧩 Use the best of two worlds. Create fast, performant, native Web Components using React.

Home Page: https://direflow.io

License: MIT License

JavaScript 16.95% TypeScript 77.02% HTML 1.98% CSS 3.60% Shell 0.45%

direflow framework react web-components

direflow's People

Contributors

Stargazers

Watchers

Forkers

pedrodgfaria angry-bird-closure emancipatego 4codealabama luyanchen groenborg luxyangruhn sumitparakh lioshi johndeved togoog nicocunin doc22940 silentscripter cnov20 miguelespinozamedina pantalaimon andrusch johnmcase cbforks life4aiur abhijit-paul-blippar mephinet nezhmetdinov prathamkumar14 hatimmnomani eddges arjun6610 tomasguerreiro liady superandrew plusxp bastianma alex-fournier kcmr jcads stshort yaya-bhavik andrebnassis jefferysummersbuilt joecwallace primamateria peturssonstefan-ikea zeratul1 frankkai jeremyiraheta joelash therakeshpurohit brettm12345 apcacher fourth 9lambda pseekoo turenc sivarajh peterittner ebzh000 stevemoretz handoppler37 vasilrashkov yogitakadam14 luandev nxxxt use-the-fork mt-hagen vijay-kumar-singh 00mjk tlahmann johntymuriithi cerdoccode sarathctm songbug1024 digitallysavvy vinitkumargoel

direflow's Issues

Generate boilerplate to make project NPM-ready

Feature

It should be possible to make a Direflow Setup NPM-ready by providing necessary boilerplate code.
The option should be provided with the CLI both during the initial setup, and as an add-in at a later point.

Synchronizing properties and attributes

Hello dear direflow team.
I would like some input parameters to be controlled both via attributes and via properties, like the native html title property/attribute works, for example. Attribute and property are always at sync.
Of course, the react element should rerender when the property is changed or when setAttribute is called.

If this is to complicated, I would to have at least the one way: the property is set when the attribute changes.

I have noticed that if I add the "foo" key in both direFlowComponent.setAttributes() and direFlowComponent.setProperties() parameters, only the property works. Changing the attribute in the dom will cause no rerendering and will not affect the result of myElement.foo getter.

Do I do anything wrong?
I would really need a configuration that keeps those things at sync, consistently.
Thanks a lot!

flowdire maybe?

I just came across this project and am really pleased that others are seeing the inevitability of HTML custom Components.

I have actually taken the opposite approach and have a set of custom Components that are designed to be stand alone.

The challenge is that I am unclear as to how to best integrate them back into the react ecosystem, hence this note.

No doubt there are many that would like to keep their existing react apps and for all new development use custom components.

Is this something that you are interested in including in direflow? or a poorer relation to direflow?

I think that there are many that are no longer believers in the core react technology and team due to their inconsistent technology adoption (classes, arrows, then not classes ... .instead of just doing everything in prototypes properly)

I for one am tired of having to rewrite for the latest version of react-router or to try and figure out how to unwrap other components in order to use a different material ui design ...etc.

let me know and i will gladly help

thanks

Multiple WebComponents on Same page

Hi,

When consuming the bundle, having multiple components on same page, a setState invocked in one, provoque the same result on the others, i'm missing something?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="public/index.css">
    <title>Direflow Test</title>

    <script src="componentBundle.js"></script>
</head>
<body>
<component style="width:400px"></component>
<component style="width:400px"></component>
</body>
</html>

so if i have a state change on a "onClick" action, it will be interpreted by the 2 components.

Integrate UI libraries with useShadow:true

In app.js of a web component I import materialUi (https://material-ui.com) to use collection of react's components
import React from 'react';
import Alert from '@material-ui/lab/Alert';
It works with shadow dom off but how integrate MaterialUI style in component with shadow dom on in direflow component?

Release of Direflow v. 2.0.0

The new release will include the following updates:

Breaking changes:

Deprecation of 'Direflow Project' and the command direflow create -p.
Ability to create multiple components from the same setup. See this PR.
Performance optimizations. Better usage of shared dependencies.

Enhancements:

Isolated properties and attributes. See this PR.
Registration of properties and attributes becomes optional.

Part of 2.x.x:

Introducing support for child elements. See this issue.
Polyfills becomes configurable through plugins. See this issue
Doc pages on how to get started developing on Direflow, in order to make it easier for other developers to contribute with PRs. See this issue

"withStyles" is not exposed

Hi,

I tried to use withStyles in one component, but seems that it is not exposed in the direflow-component

You would also want to update the documentation in https://direflow.io/events-and-styles#styles in order to reflect direflow-component instead of create-react-web-component

Upgrade version of direflow

Is your feature request related to a problem? Please describe.
I create a web-component with Direflow in 3.0.1, how upgrade to 3.1.0 version?

Describe the solution you'd like
A description of which updates make in source code.

Describe alternatives you've considered
I can re-create a web-component and paste the source code... But an easy way will be good

Optimized bundle-size for projects

Enhance the build-script such that all shared dependencies between components are hoisted to project level.

Steps:

Create script for detecting shared dependencies across components
Configure Webpack to chunk components during build to remove shared third party libraries
Include in project build via. Webpack

Include support for Styled Components

Include support for Styled Components in Direflow Component.

Split Direflow Components into multiple bundles

Feature

It should be possible to set up a build configuration that specifies different bundles for different Direflow Components.

const buildConfiguration = {
  'some-component': {
    filename: 'someComponent.js'
  },
  'another-component': {
    filename: 'anotherComponent.js'
  },
  filename: 'remainingComponents.js'
}

This configuration object should somehow go in the direflow-webpack file.

The above is just an example and is subject to change.
This issue will be edited as this feature gets more clear.

Docs pages: Get started developing on Direflow

Doc pages on how to get started developing on Direflow, in order to make it easier for other developers to contribute with PRs.

Direflow Settings Component Decorator

Feature

As an alternative direflowComponent.configure, it would be nice to have a decorator which sets static settings variables on the to react component which direflow can use to figure out what settings to use in the direflowComponent.create function

/direflow-component/App.tsx:

@DireflowComponent({
  name: 'cool-component',
  useShadow: false,
})
export default class App extends React.Component <{name: string}> {
  static defaultProps = {
    name: 'John', // take "direflowProperties" from here
  }

  render () {
    return (
      <div>hello {this.props.name}</div>
    )
  }
}

./index.ts:

import { DireflowComponent } from 'direflow-component'
import App from './direflow-component/App'

const direflowComponent = new DireflowComponent()
/* 
 * no direflowComponent.configure needed, 
 * direflow will figure out settings from static variables in the "App" class 
 */
direflowComponent.create(App)

alternative for non-typescript users:

class App extends React.Component {
  render () {
    return (
      <div>hello {this.props.name}</div>
    )
  }
}

App.direflowName = 'cool-component'
App.direflowUseShadow = false
App.defaultProps = {
  name: 'John',
}

or just stick to

direflowComponent.configure({
  name: 'umbrella-component',
  useShadow: false,
  properties: {
    name: 'John',
  },
})

Makes loading of WebComponent Polyfills configurable

Currently webcomponent-bundle.js loads 3 different polyfills:

sd : shadyDOM useless when you use your web-component with {shadow: false}
ce : CustomElement
pf : Platform polyfills some others basic polyfill probably already loaded by the app which use your web-component.

Those polyfills could be separetely loaded depending of your app:
https://www.jsdelivr.com/package/npm/@webcomponents/webcomponentsjs?path=bundles

Maybe the simple solution is to move the import of polyfills from the WebComponent.tsx class to the App.js class then the developer can modify the polyfill imported for his specific usecase.

What do you think ?

I try to achieve that because in one of our application we have trouble using jquery and the web-component polyfill bundle in IE 11 because of shadyDOM
ShadyDom makes calls like $('myElement').triggers('change') impossible.

Implement ESLint in JS template & Make user choose between ESLint and TSLint for TS template

Is your feature request related to a problem? Please describe.
Implement ESLint in JS template & Make user choose between ESLint and TSLint for TS template

Describe the solution you'd like
When creating a direflow project, it would be nice to have ESLint setup for the JS template,
just like how TSLint is set up for the TS template already.
And for the TS template, it would be nice if you could choose between TSLint and ESLint.

Additional context
Why ESLint for TypeScript? palantir/tslint#4534

react-fontawesome visual issues

Hi!

I am trying to use React FontAwesome library in my project.
As this library uses SVG to display the icons, each icon displays really big.
This does not happen in a create-react-app application.
I see your comment regarding SVGs in https://direflow.io/additional, but I do not know how it applies to this library.

Can you please assist?
Thanks again!

Optionally disable scoped styles

Feature

There should be an option to disable scoped styles.

The configuration should be set in the configure method:

direflowComponent.configure({
  name: 'example-component',
  useShadow: true,
  scopedStyles: false, // <- We disable scoped styles here
});

Result

The unique identifier disappears on css classes and HTML elements:

Example

// With scoped styles
<div class="app s263677616">
...
// Without scoped styles
<div class="app">
...

// With scoped styles
.s263677616 a {
  text-decoration: none; color: inherit; 
}

// Without scoped styles
a {
  text-decoration: none; color: inherit; 
}

Additional context

Currently, the third-party library style-it is used for injecting styles. This feature may not be possible with style-it, so another option for handling styles may be needed.

Options to use 'async' when using external-loader plugin.

Feature

When using the external-loader plugin, there should be an options provided that will import scripts using the async attribute.
If multiple Direflow bundles exist in the same host application, they "hook into" an already loading script, if it already exists in the head of the host.

Usage

plugins: [
  {
    name: 'external-loader',
    options: {
      paths: [
        {
          src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
          async: true,
        }
      ],
    }
  }
]

Result

The script tag will load using async:

<script async src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

Build failed with TypeScript direflow project

Here are steps to repro the same:

Step 1: direflow create -p (choose TypeScript as project)
Step 2: direflow create (after change current directory and created cool component TypeScript type)
Step 3: yarn install
Step 4: yarn build (build failed with below error)

Error Message:
yarn run v1.19.1
$ direflow-project build

Please be patient
Building all Direflow Components...

Build started: cool-component
Build success: cool-component

Creating production build ...

events.js:174
throw er; // Unhandled 'error' event
^

Error: spawn webpack ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
at onErrorNT (internal/child_process.js:415:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
Emitted 'error' event at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:246:12)
at onErrorNT (internal/child_process.js:415:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Building packages in UMD

We want to loaded direflow at runtime, so it would be great if there was a way to package it with UMD like direflow.min.js.

Providing html content using named slots does not work.

Describe the bug
Providing html content using named slots does not work.

To Reproduce

Create a simple web component with direflow (using shadow dom).
Include some named slots.
Example:

<Styled styles={styles}>
     <div>
      <section id="title">
    		<div>React</div>
    		<slot name="subtitle">subtitle slot</slot>
    	</section>
    	<section id="main">
    		<div>JS dependencies: <b>None</b></div>
    		<div>Minified Size: <b>283.3 Kb</b></div>
    		<div>Shadow dom: <b>Yes</b></div>
        <div>uses native observableAttributes: <b>Yes</b></div>
        <div>can use slots: <b>Yes</b></div>
        <br/>

    		<div>msg is <b>{props.msg}</b></div>
    		{props.msg == 'surprize' &&
    			<div>An extra surprize div.</div>
    		}
    		{props.someList &&
    			<div>someList has {props.someList.length} elements</div>
    		}
    	</section>
    	<section id="footer" onClick={() => clicked(props)}>
    		<slot name="footer">footer slot</slot>
    	</section>
    </div>
  </Styled>

Use your web component in a html page (I used a plain vanilla html page):

<custom-react-element>
    <div slot="subtitle">Custom subtitle</div>
    <div slot="footer">Custom footer</div>
</custom-react-element>

Expected behavior
The given divs appear inside the web component.

Actual behavior
The diven divs appead outside the web component.

Package Manager (please place an 'x' below):
To install Direflow, I used...

NPM
Yarn

Screenshots
The direflow element is the last one with title "react".

Additional context
Spec: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

I think that the problem is that direflow creates a span inside the web component and attaches the shadow dom on the span.

The user app has no way to know (or influence) this, and inserts the named slot elements parallel to the generated span, not inside it.
Thus the light dom and shadow dom are not merged properly by the browser.

Support for child elements

Be able to pass in a child to the Web Component and inject it at a place of choice.

<cool-component>
  <div>
    <span>This is a child</div>
  </div>
</cool-component>

We would use a special component in React, and the child should be injected into here.

return (
  <Styled styles={styles}>
    <div className='app'>
      <DireflowChild />
    </div>
  </Styled>
);

Does not possible to create multiple bundle

I have created second component. Added entry points to the webpack as entry: ['./src/index.tsx', './src/App2/index.tsx'], tried to bundle it and had next error
DireflowComponent.js:63 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry

Bundle polyfill as splitchunk instead of remote script

It would be nice to bundle the polyfill components so you could serve it from your own server with the
direwolf component after build.

React-Select library issues

Hi again,

I am also using react-select in my project.
I seems that it build its styles with styled-components internally.
When I load my app with a react-select element, it just looks like a mess. Seems that the styles are not being picked up.
Any idea what could be happening here?

Thanks!!

Error : Cannot read property 'forEach' of undefined CustomComponent.js

Set up the app and when I run it I see this error in console.

Develop multiple web components in the same time

Is your feature request related to a problem? Please describe.
I would like to be able to develop multiple web components bundled separately.

Describe the solution you'd like
Having setup where src directory can contain multiple folders for every single web component with the index.js as an entry point inside every folder (similar as it is for a single web component at the moment).

Additional context
This way I will be able to include all web components in public/index.html and develop them simultaneously as well as make a production build for all of them.

direflow rerenders component each time when updating one prop

in my project, i pass several properties like this:

<Echarts
    styles={styles}
    option={option}
    onChartEvents={chartEventListeners}
 />

but inside Echarts component, props updates one by one

and i check the source codes and find the following codes:

 public reactPropsChangedCallback(name: string, oldValue: any, newValue: any): void {
        if (oldValue === newValue) {
          return;
        }

        factory.componentProperties[name] = newValue;

        this.mountReactApp();
      }

and i think direflow rerenderring the comonents after all props value updated may be better 'cause there may be dependences among this prop values

error trying to install dependencies for initial set up

Cannot rename build file from webpack override

I want to rename build file: direflowBundle.js.
Like this I have error: ENOENT: no such file or directory, open '/home/lioshi/gitlibs/booki/eilep-booki/build/customeName.js'

const webpackConfig = require('direflow-component/config-overrides');

/**
 * Webpack configuration for Direflow Component
 * Additional webpack plugins / overrides can be provided here
 */
module.exports = (config, env) => ({
  ...webpackConfig(config, env),
  output: customOutput(config.output)


});

const customOutput = (output) => {
  const { checkFilename, ...newOutput } = output;

  return {
    ...newOutput,
    filename: 'customeName.js',
    chunkFilename: 'vendor.js',
  };
};

.sass file support

Is your feature request related to a problem? Please describe.
Direflow already supports Sass, but only supports the .scss file syntax.
it would be great if .sass files would work as well

Describe the solution you'd like
expand direflow webpack into supporting .sass alongside .scss files

Additional context
https://sass-lang.com/documentation/syntax#the-indented-syntax

Question: how pass value with events?

Hi! First of all, thanks for sharing this project. Its awesome!

Please, how can I pass value with events? For exemple I wanna pass user:

In web-component:

const handleClick = () => {
    const user = { username: 'lorem' };
    const event = new Event('my-event'); // I pass user here?
    dispatch(event); // Or I pass user here?
  };

In the page who are loading the web-component:

const component = document.querySelector('component-direflow');
component.addEventListener('my-event', (value) => {
  console.log('value:', value);
});

Component property update even if the attribute is defined

Is your feature request related to a problem? Please describe.
Is there a special reason for disabling component property update if the same property is defined as an HTML attribute?
One can set a direflow component property when the webcomponent is defined, but there is a common use-case for defining component properties on page load (in the HTML) and changing them later (via Javascript).

Describe the solution you'd like
As a developer I'd like to define component attributes in the HTML and change them with Javascript so the developer experience is consistent. Other HTML elements behave the same way.

Describe alternatives you've considered
In case this feature is missing I need to remove and recreate the whole component in the DOM if I want an attribute to be changed.

Additional context
I've created a fork for testing it out and it seems that it's working:
https://github.com/filflora/direflow
Should we talk about it?

Tested here:
https://github.com/filflora/direflow-poc/tree/multiple-components-per-app
Click on the button at the bottom of the page. Currently the last component is not updating.

Support for styled-jsx

Is your feature request related to a problem? Please describe.
I would like to be able to use React components that use styled-jsx styling in Direflow web components.

Describe the solution you'd like
Direflow supports styled-jsx same way as styled-components.

Additional context
This way a lot of existing shared React components can be reused in web components without rewriting.

Exposing Methods

Hi, is it possible to expose methods?

to be called like:
component.someMethod()

Optimize the bundle size

After building the basic component the bundle size is around 280kb, I assume it is because the bundle includes react and react-dom modules.

I suggest to make the entry bundle as thin as possible and import react and react-dom only when needed by using dynamic imports. In order to use the component I will need to include only the
entry bundle, which is very thin, and it will load react and react-dom only if the web component is used on the page.

what do you think?

Styled attribute styles with multiple entries

At first 'mange tak!' for this cool project @silind :-) I'm not sure if this is a bug - just in case that it is not can you please consider it as feature request? Otherwise: what could be a solution to this problem?

Describe the bug
When using multiple entries for styles-attribute of Styled-Element only the last one is used, the first will be ignored:
<Styled styles={styles, semanticui}>

To reproduce
Steps to reproduce the behavior:

Create simple project via 'direflow create', 'npm install' as described here: https://direflow.io/get-started
Add semantic-ui-css via 'npm install semantic-ui-css'
Add import of that css to imports in App.js:

...
import styles from './App.css';
import semanticui from 'semantic-ui-css/semantic.min.css';   <--- This is new
...

In line 22 of App.js add semanticui to the list and a ui-component at the end:

...
return (
<Styled styles={styles, semanticui}>
      <div className='app'>
...
         <div class="ui label">
           <i aria-hidden="true" class="mail icon"></i>
           Test
         </div>
      </div>
</Styled>
...

Expected behavior
Both styles, 'styles' and 'semanticui', should take effect.

Package Manager:
To install Direflow, I used npm

Update 1:

As a workaround I'm currently using the external-loader (https://direflow.io/plugins#external-loader) to load semantic via CDN instead of packaging it with my react-component. The only problem is that with this workaround no icons (semantic includes fontawesome) are displayed.

Update 2:

Just adding
import 'semantic-ui-css/semantic.min.css';
at the top of App.js is not working as well when using direflow. In my original react-app it is working that way.

Attribute change from parent is not working

Describe the bug
In a parent-child relationship where the child is a React based web component, the parent can not change the props of the web component.

To Reproduce
Steps to reproduce the behavior:
Create a webcomponent with Direflow and embed it somewhere. Try to change an attribute like in the documentation:
const component = document.querySelector('awesome-component');
component.sampleList = ['Create', 'Build', 'Use']

Checkout this repository: https://github.com/filflora/direflow-poc
npm i and cd direflow-poc
npm start
Open up http://localhost:3000 in Chrome and open devtools
Click "Change attributes" button
See err message: Uncaught DOMException: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.
Button click event handler is in: public/index.html

Expected behavior
The web component should receive the new attribute value and rerender component accordingly.

Package Manager:
To install Direflow, I used npm.

Additional context
I'd like to find a solution to reuse (separately developed) components in multiple microApps. In a scenario where multiple micro applications have the same header component which can be maintained separately.

Screenshot

Question: has the "one web component per React application" limitation any technological boundaries?

As far as I understood there is a ReactDom.render call inside the WebComponentFactory which may cause this effect. Am I at the right place? Have you already considered a solution for this? (Sorry for asking so many questions :) )

Is your feature request related to a problem? Please describe.
In case a web component is used in multiple application, there could be a scenario where a single application could contain all these web component definitions. For example: This way a React (or any other dependency) version bump could be solved in one place.

Describe the solution you'd like
As a developer I'd like to maintain multiple web components in one React install (no multiple node_modules folder and probably different version numbers) to keep the maintenance cost at minimum.

Describe alternatives you've considered
In case all component needs a separate React install there could be a "root" install/build script for all the component folders. When all the builds are finished the bundle files could be concatenated together. This could be a workaround, yet it seems a bit hacky and slow.

Additional context
Currently all the DireflowComponents are created inside the shadowRoot of the first element in case there are multiple component definitions inside a single React App.

Script-Loader plugins seems to be not working

Hi! This project is great! Thanks for coding it!

It looks like the script-loader is not working.
I added the jquery example from the documentation, but I do not see to be loading anything.

This is my plugins configuration in the direflow-config.js:

plugins: [
    {
      name: 'script-loader',
      options: {
        externals: [
          {
            module: 'jquery',
            entry: 'https://unpkg.com/[email protected]/dist/jquery.min.js',
            global: 'jQuery',
          },
          {
            module: 'bootstrap',
            entry: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
          }
        ],
      },
    },
    {
      name: 'font-loader',
      options: {
        google: {
          families: ['PT Sans', 'Noto Sans JP'],
        },
      },
    },
    {
      name: 'styled-components',
    },
  ],

Can you please give it a try?

Migrate from tslint to eslint

Migrate from tslint to eslint.
Make sure to preserve as many of the current tslint rules as possible.

Fix liniting issue / change rules whereever needed.

Setup integration test with cypress

Create a new Web Component and render it with puppeteer.
Make assertions on the following criteria:

Renders with an initial state (initial properties)
Updates correctly on change attribute
Updates correctly on change property
Renders with a slotted element
Updates when a slotted element is injected dynamically

Integrate with GitHub Actions as a part of the test pipeline.

Icons in webfonts doesn't show under shadow root

Describe the bug
When using the icon pack from material icons or font awesome, icons doesn't appear when shadow root is enabled.

To reproduce
Steps to reproduce the behavior:

Create a new Direflow Component with direflow-cli
Use the icon-loader plugin and include 'material-icons' (description).
Add an icon from material icons

Expected behavior
Icon is showing even if shadow root is enabled

Actual behavior
No icon is showing, instead the text appears.
If shadow root is disabled, icon shows as expected.

Package Manager:
Issue applies for both npm and yarn

Additional context
For a reference, see the discussion in this issue.

Shadow option is not available with direflow-component ^1.0.26

Earlier version I was able to pass shadow option like below:
//direflowComponent.render(CcmInvoiceTile, 'sw-ccm-invoice-summary-tile', { shadow: false, });

with the new latest version "direflow-component": "^1.0.26" Now it supports only two parameter. Is there a way to pass the shadow option as false? Some of our existing component does not need shadow feature at all.

Styled wrapper component causing snapshot tests to crash

Describe the bug
When running snapshot tests of a React component that includes the <Styled> HOC from direflow-component, tests crash.
Remove the <Styled> from the component, and snapshots are written just fine.

To reproduce
Steps to reproduce the behavior:

Create a new Direflow Setup using direflow-cli
Install all dependencies and run yarn test
See error

Expected behavior
Snapshot tests should be written without jest crashing.

Screenshots

Multiple instances of styled-components causes crash

Describe the bug
Using Direflow Components with styled-components in a host application with styled-components causes unexpected clash due to multiple instances of styled-components.
Styled Components has elaborated on this issue here and here.

The issue occurs without a clear consistency since using Direflow Components with styled-components in a host application with styled-components usually works without any problems.

To Reproduce
Steps to reproduce the behavior:

Create a new Direflow Setup using styled-components.
Build and use it in a React application that also uses styled-components.
Most likely, no problem will occur, however, introducing re-renderings in the host application that includes the Direflow Components in each render is likely to provoke the problem.

Expected behavior
Direflow Component renders normally in each rerender.

Package Manager:
Examined using both yarn and npm.

Screenshots

Make Webpack settings eaiser to configure

Feature

Create an API / interface for easily configuring the most common Webpack settings.
Examples: Changing names of bundle-files, changing names of bundle folder (currently 'build'), configuring optimization, etc.

There should still be an option to fully configure/override Webpack configuration as it is now, but an easy API should be offered for most common cases.

This partially overlaps with this feature.

Reusing components to create a web component

Is your feature request related to a problem? Please describe.
What I need is to export a component within my project as a webcomponent. Therefore what I did was to create a subfolder within my project where direflow sits.
When I try to import my component into the App.js of my newly created folder of direflow, I get an error "Module not found: You attempted to import ../../../src/containers/event/index which falls outside of the project src/ directory. Relative imports outside of src/ are not supported."

Describe the solution you'd like
Is there a way/configuration where direflow can import my components from my project.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
That's the folder structure of my project, and "widget-component" is the name of the project created with direflow.

Support for sass

Create support for sass - working similar to how css works.

Automated package version handler

Create a script that handles automatic increase of patch-version for NPM when merging into master.

silind-software / direflow Goto Github PK

direflow's People

Contributors

Stargazers

Watchers

Forkers

direflow's Issues

Feature

Release of Direflow v. 2.0.0

Breaking changes:

Enhancements:

Part of 2.x.x:

Feature

Feature

Feature

Result

Example

Additional context

Feature

Usage

Result

Update 1:

Update 2:

Feature

Recommend Projects

Recommend Topics

Recommend Org