webcodesk/webcodesk-srv

Webcodesk - Web App Builder for Create React App

A Web Application Builder

Marketplace

This repository stores two files for the Webcodesk marketplace.

• List of projects to start a new project: new-projects
• A list of projects with components that can be added to an existing project: new-packages

Contribution

If you want your project to be in one of the lists, make a new PR for any of the files.

webcodesk-srv's Issues

Manipulating props in funcs of an unset control

Hi,
while continue working with your tool I had to tackle the following issue:

• I added a data receiving control to the page (like a list of items)
• I didn't change any of the props (leave to default) because they was fine
• I wrote a function which should use the current stateOptions.props and update it with the new received data (e.g. a list of objects) from the function input.
• I wrote this updated props to the dispatch function.

While doing this I saw 2 strange behaviors:

1. The control didn't received the new data. By debugging the tool for a while,
   
   I figured out that it uses internally a state cache where all props of all controls are stored. How ever, only the props of controls where the user made changes in the page. If the control was added to the page without any change to the properties, the state of this control was undefined. Mean an undefined prop-object was insert into the *.funcs and as a result the dispatch function was never called. The flow end at this point.
   I'm not sure if this is expected by design. I would expect to get a props-object with the defaults defined in the source code defaultProps instead of an undefined one.
2. The flow was a chain of 4 elements. In the flow record it shows that the chain stopped at the 2nd element. But in real the chain stopped at the 3rd element. Which leads me to analyzing the wrong function for a while. So it looks for me that when a flow element is executed and never calls the dispatch function, that this element is not recorded as executed flow-element in the record.

Renaming of Pages, Flows maybe also Templates

Hi,

I missing a way to rename flows, pages and maybe also templates (didn't worked with templates yet).

Specially Flows are non connected and should be easily to be renamed.
On pages this could destroy routing, of course, you have to be careful with that.
On templates this might make problems with Pages created out of the template? Maybe all usages could be auto updated?

Documentation questions

Following the Todo tutorial on a Windows laptop I create the basic server and get the http://localhost:7070/ and going through the project Readme for Todo. When creating the main page it cant connect localhost. In the Readme tutorial for Todo you can add the text "If refreshing don't work you can restart the server from the top left server menu"

How to build for relative paths

Hi,
I want to know how to build for relative paths, like https://create-react-app.dev/docs/deployment/#building-for-relative-paths

Thanks:)

Are there type definitions for TypeScript for *.funcs.ts files

Hi,

creating a function with TypeScript will end in some type check "errors" for the parameters:

Are there TS type definitions for at least a few of the parameters (like dispatch, history, ...). Option and StateOfDispatch are types which has to be defined in the specific application, isn't it?

Actual you have to define the type definition by your own:

Or use a // @ts-ignore to ignore the errors.

Default transformation script is invalid

Current:
return function (outputObject) { return inputObject; }

Expected:
return function (inputObject) { return inputObject; }

New Component Typescript selected not working

Steps:

• Create new project using the default template,
• Create new component
• Check TypeScript
• Click Generate

Expected Outcome:
Dialog Closed, Component Created

Currently:
Dialog Closed, No component created

$ npx @webcodesk/init example Expected single character argument.

$ npx @webcodesk/init example
Expected single character argument.

hook function error in component preview open

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Path does not exist

webcodesk-srv/webcodesk-srv.js

Line 23 in 200d0ad

var controller = require('./server/srv/controller.js');

Error in plugin 'gulp-babel' while running yarn run build-server

Hi !
I got this error while trying to build the project:

>yarn --version
1.22.0

>yarn run build-server
yarn run v1.22.0
$ gulp --gulpfile ./gulpfile.js build
[11:46:42] Using gulpfile ~/work/webcodesk-srv/gulpfile.js
[11:46:42] Starting 'build'...
[11:46:42] Starting 'clean'...
[11:46:42] Finished 'clean' after 5.87 ms
[11:46:42] Starting 'commons'...
[11:46:43] 'commons' errored after 964 ms
[11:46:43] Error in plugin "gulp-babel"
Message:
    The number of constructor arguments in the derived class t must be >= than the number of constructor arguments of its base class.
[11:46:43] 'build' errored after 971 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

did you already face this problem ?

Thanks.

Settings Properties are not shown in some cases

Hi,

when extending the settings.conf.ts not all the defined properties are shown in the UI:

The green one are working, the red one don't work.
Don't work is meaning they are not shown in the UI. Somewhere in the transformation from the settings.conf.ts to the settings.js they got lost.

Missing a way to record "onApplicationStart" flows

Hi,

the debugging capabilities in the tool are really amazing. The way to record the execution of flows and there elements with all the input / output information are very helpful.

How ever, this is cool for flows executed by user interactions (like a click).
There is unfortunately no way to record flows directly from start of the application which makes it hard to debug onApplicationStart flows.

I would like to hit the record button and then do a page refresh to record the ApplicationStart flows but the refresh button is disabled once the record is activated.

Socket is idling in Chrome.

Doing no other activity in my program, I see intermittently an exception is thrown in the browser console, from inside of the socket.io

Adding props to a component are not directly reflected

Hi,

when having a component without props definition (initial) and then adding some, the Webcodesk UI don't shows automatically the added props in the preview screen or when using the component. A Reload of the Webcodesk application, in the browser, is needed to see the changes.

• Create a component without props definition (in my case a *.tsx but maybe a general issue)
• Open the preview in Webcodesk
• Add some props-definitions to the component and defaults
• Go to Webcodesk
  • The source code shows the new version with the props-definition
  • The preview works with the new props (Defaults)
  • The Props are not displayed in the right properties panel
• Reload the Website
  • Properties are displayed
• Add an additional property to the definition
• Go to Webcodesk
• Component works with the new added Props
  • The properties view is not updated

Add new property type: `oneOfType`

There should be the ability to add different shape types into the array property. When the user adds an array item in the property editor there should be a context menu with types names in options as per shapes in oneOfType property declaration.

Add auto incremental suffix to the name when add a new instance

Add the incremented number at the end of the name of the new instance if there is already such a name in the list of instances.

• If there is an equal name add 1 to the end of the name.
• If there is a list of equal names with number suffix at the end, increase the last maximal number and add to the end of the new name.

Feedback: Really love the timelapse video

Really cool. Did you build this all by yourself?

As a dev, I usually prefer writing code myself, and every dev has a slightly different way of doing things, (especially styling)

Wish you best of luck my friend. The UI looks exciting though.

Add a live preview mode to the template composer

The user should have the ability to test the template composition alive so that he can switch off/on the selection of the components on the page.

Losing recent changes in etc files

It seems that multiple etc files are not saved correctly.

Make a tree view of the instances under the page in the left navigation panel

It is quite inconvenient to navigate through the flat list of the instances in the page on the left panel. There should be a tree view with the ability to collapse/expand the nested instances.

Name mangling for components in relation to page schema

There is a concern if we want to minimize the entire app that the name mangling will cause the schema to be invalid as the page schema is defined as the unmangled path to the component name.

If this could be the case, is there any way to ensure the minimizer will not impact the app?

Double Props definition when working with TypeScript

Hi,

when working with TypeScript Components, it is needed to define the props definition twice:

• As the TypeScript way (Interface and generic React Component React.Compoennt<PropsType>) for type checking in the code
• As a PropTypes definitions for being reflected in the Webcodesk UI

import React from 'react';
import PropTypes from 'prop-types';

export interface CompProps {
    text: string;
}


class CompName extends React.Component<CompProps > {

    static propTypes = {

        text: PropTypes.string
      }

    static defaultProps = {
        text: "Hallo World"
    }

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

export default CompName;

It would be nice when for TypeScript compoenents the TypeScript Props definition could be used to show and reflect the definition in the Webcodesk UI. That would make maintenance easier.

Expand all sections while the first opening.

When the user opens Webcodesk first time expand all sections. Expand only the first level, there is no need to expand all trees inside each section.

Replace `Generate ...` buttons in "Components" and "Functions" sections with menu

It is required to replace buttons Generate source code for new component and Generate source code for new function list with drop-down menus.

There should be options in the menu.
In the "Components" section:

• Generate source code for new component
• Install packages from the market

In the "Functions" section:

• Generate source code for new function list
• Install packages from the market

The option Install packages from the market should open the same dialog when the user clicks on the top-left corner menu and chooses the option Install packages from the market

Upgrade npm dependencies

How does this compare to Webflow?

Feature-wise

The changes in comments to props are not reflected in the props editor

The template compiler does not copy a new value of the property comment after editing the source code.

Or the props editor does not update with new values.

Set the first value as the default in property with type PropTypes.oneOf

When the user adds the item in the array on the property editor, and one of the fields of the array's item has a PropTypes.oneOf property, the property field in the property editor displays the value of the first item from the values in the dropdown. But, the real value of such property is undefined until the user does not select value from the dropdown.

Details:

• It worth analyzing the array values of the PropTypes.oneOf property and implicitly set the first value as the default.

Property definition with reusable propTypes

Hi,

I'm trying the following:
I have some propTypes I want to define central and reuse it in many components.
There fore I have create a file "baseTypes"

import PropTypes from 'prop-types'

export const baseTypes = {
    alignSelf: PropTypes.oneOf(['start', 'center', 'end', 'stretch'])
}

Now I want to use this definition in many other components like this:

import * as React from 'react'
import PropTypes from 'prop-types'
import { baseTypes } from './propTypeDefinitions'

class Box extends React.Component {

    static propTypes =  {
        align: PropTypes.oneOf([
            'start',
            'center',
            'end',
            'baseline',
            'stretch',
          ]),
          alignContent: PropTypes.oneOf([
            'start',
            'center',
            'end',
            'between',
            'around',
            'stretch',
          ]),
          alignSelf: baseTypes.alignSelf
    }

    render() {
       //...
    }
}

How ever, only the 2 in the file defined properties are shown in the props panel. alignSelf (defined in another file) is not show.

How are you reading the props definitions?
By parsing the source code or by using Component.propTypes?
Looks for my like toe first one is true.

There reason why I have this issue is, that I using a UI Framework. They already have created all this propTypes definitions and I just want to reuse it instead of copy and paste it to my source code.
But for any reason it don't works as expected.