Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Overview

Macaron

Screenshot

example workflow

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript.

Its goal is to allow you to create and continuously maintain components visually, and make Web frontend development easier and more fun.

  • πŸ–ŠοΈ Easy-to-use visual editor
  • πŸ§‘β€πŸ’» Runs in Visual Studio Code
  • 🌐 Framework-agnostic
  • πŸ“₯ Import Web Components
  • πŸ—’οΈ Clean File Format
  • 🎨 Copy-paste from Figma (WIP)

Demo

Usage

Development

Setup

# Clone
git clone --recursive [email protected]:macaron-elements/macaron.git

cd macaron

# Install dependencies
yarn

# Build
yarn build

Project Structure

  • /packages/editor - The Macaron Editor
  • /packages/paintkit - The submodule for the paintkit library
  • /packages/vscode - The VS Code extension that provides Macaron as a custom editor
  • /packages/figma - The Figma plugin for Macaron
  • /packages/compiler - The compiler that converts Macaron files to Web Components
  • /packages/loader-vite - The Vite plugin to import Macaron files directly from JS/HTML
  • /packages/docs - The Website and documentation

This project uses Yarn Workspaces.

Start devservers

yarn dev

Launch VS Code extension

  • Make sure yarn dev is running
  • Open the root directory in VS Code
  • Press F5 (or menu Run β†’ Start Debugging)

Test

yarn test

# Update snapshots
yarn test -u

Publish npm packages

lerna publish

Publish VS Code extension

Log in to vsce before publish

yarn build
cd packages/vscode
yarn vsce publish

Analytics

Macaron uses Plausible to collect anonymous analytics data.

Dashboards

Comments
  • fix(deps): update dependency globby to v13.1.2

    fix(deps): update dependency globby to v13.1.2

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | globby | 13.1.1 -> 13.1.2 | age | adoption | passing | confidence |


    Release Notes

    sindresorhus/globby

    v13.1.2

    Compare Source


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • fix(deps): update dependency @iconify/json to v2.1.64

    fix(deps): update dependency @iconify/json to v2.1.64

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @iconify/json (source) | 2.1.56 -> 2.1.64 | age | adoption | passing | confidence |


    Release Notes

    iconify/icon-sets

    v2.1.64

    Compare Source

    v2.1.63

    Compare Source

    v2.1.62

    Compare Source

    v2.1.61

    Compare Source

    v2.1.60

    Compare Source

    v2.1.59

    Compare Source

    v2.1.58

    Compare Source

    v2.1.57

    Compare Source


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • chore(deps): update dependency vitepress to v1.0.0-alpha.2

    chore(deps): update dependency vitepress to v1.0.0-alpha.2

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | vitepress | 1.0.0-alpha.1 -> 1.0.0-alpha.2 | age | adoption | passing | confidence |


    Release Notes

    vuejs/vitepress

    v1.0.0-alpha.2

    Compare Source

    Bug Fixes
    Features

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • chore(deps): update dependency vite to v2.9.12

    chore(deps): update dependency vite to v2.9.12

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | vite | 2.9.9 -> 2.9.12 | age | adoption | passing | confidence |


    Release Notes

    vitejs/vite

    v2.9.12

    Compare Source

    v2.9.11

    Compare Source

    v2.9.10

    Compare Source


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • chore(deps): update dependency typescript to v4.7.4

    chore(deps): update dependency typescript to v4.7.4

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | typescript (source) | 4.7.2 -> 4.7.4 | age | adoption | passing | confidence |


    Release Notes

    Microsoft/TypeScript

    v4.7.4

    Compare Source

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    v4.7.3

    Compare Source

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • chore(deps): update dependency lerna to v5.1.4

    chore(deps): update dependency lerna to v5.1.4

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | lerna (source) | 5.1.1 -> 5.1.4 | age | adoption | passing | confidence |


    Release Notes

    lerna/lerna

    v5.1.4

    Compare Source

    Note: Version bump only for package lerna

    v5.1.3

    Compare Source

    Note: Version bump only for package lerna

    v5.1.2

    Compare Source

    Bug Fixes

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • chore(deps): update dependency esbuild to v0.14.46

    chore(deps): update dependency esbuild to v0.14.46

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | esbuild | 0.14.42 -> 0.14.46 | age | adoption | passing | confidence |


    Release Notes

    evanw/esbuild

    v0.14.46

    Compare Source

    • Add the ability to override support for individual syntax features (#​2060, #​2290, #​2308)

      The target setting already lets you configure esbuild to restrict its output by only making use of syntax features that are known to be supported in the configured target environment. For example, setting target to chrome50 causes esbuild to automatically transform optional chain expressions into the equivalent older JavaScript and prevents you from using BigInts, among many other things. However, sometimes you may want to customize this set of unsupported syntax features at the individual feature level.

      Some examples of why you might want to do this:

      • JavaScript runtimes often do a quick implementation of newer syntax features that is slower than the equivalent older JavaScript, and you can get a speedup by telling esbuild to pretend this syntax feature isn't supported. For example, V8 has a long-standing performance bug regarding object spread that can be avoided by manually copying properties instead of using object spread syntax. Right now esbuild hard-codes this optimization if you set target to a V8-based runtime.

      • There are many less-used JavaScript runtimes in addition to the ones present in browsers, and these runtimes sometimes just decide not to implement parts of the specification, which might make sense for runtimes intended for embedded environments. For example, the developers behind Facebook's JavaScript runtime Hermes have decided to not implement classes despite it being a major JavaScript feature that was added seven years ago and that is used in virtually every large JavaScript project.

      • You may be processing esbuild's output with another tool, and you may want esbuild to transform certain features and the other tool to transform certain other features. For example, if you are using esbuild to transform files individually to ES5 but you are then feeding the output into Webpack for bundling, you may want to preserve import() expressions even though they are a syntax error in ES5.

      With this release, you can now use --supported:feature=false to force feature to be unsupported. This will cause esbuild to either rewrite code that uses the feature into older code that doesn't use the feature (if esbuild is able to), or to emit a build error (if esbuild is unable to). For example, you can use --supported:arrow=false to turn arrow functions into function expressions and --supported:bigint=false to make it an error to use a BigInt literal. You can also use --supported:feature=true to force it to be supported, which means esbuild will pass it through without transforming it. Keep in mind that this is an advanced feature. For most use cases you will probably want to just use target instead of using this.

      The full set of currently-allowed features are as follows:

      JavaScript:

      • arbitrary-module-namespace-names
      • array-spread
      • arrow
      • async-await
      • async-generator
      • bigint
      • class
      • class-field
      • class-private-accessor
      • class-private-brand-check
      • class-private-field
      • class-private-method
      • class-private-static-accessor
      • class-private-static-field
      • class-private-static-method
      • class-static-blocks
      • class-static-field
      • const-and-let
      • default-argument
      • destructuring
      • dynamic-import
      • exponent-operator
      • export-star-as
      • for-await
      • for-of
      • generator
      • hashbang
      • import-assertions
      • import-meta
      • logical-assignment
      • nested-rest-binding
      • new-target
      • node-colon-prefix-import
      • node-colon-prefix-require
      • nullish-coalescing
      • object-accessors
      • object-extensions
      • object-rest-spread
      • optional-catch-binding
      • optional-chain
      • regexp-dot-all-flag
      • regexp-lookbehind-assertions
      • regexp-match-indices
      • regexp-named-capture-groups
      • regexp-sticky-and-unicode-flags
      • regexp-unicode-property-escapes
      • rest-argument
      • template-literal
      • top-level-await
      • typeof-exotic-object-is-object
      • unicode-escapes

      CSS:

      • hex-rgba
      • rebecca-purple
      • modern-rgb-hsl
      • inset-property
      • nesting

      Since you can now specify --supported:object-rest-spread=false yourself to work around the V8 performance issue mentioned above, esbuild will no longer automatically transform all instances of object spread when targeting a V8-based JavaScript runtime going forward.

      Note that JavaScript feature transformation is very complex and allowing full customization of the set of supported syntax features could cause bugs in esbuild due to new interactions between multiple features that were never possible before. Consider this to be an experimental feature.

    • Implement extends constraints on infer type variables (#​2330)

      TypeScript 4.7 introduced the ability to write an extends constraint after an infer type variable, which looks like this:

      type FirstIfString<T> =
        T extends [infer S extends string, ...unknown[]]
          ? S
          : never;
      

      You can read the blog post for more details: https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#extends-constraints-on-infer-type-variables. Previously this was a syntax error in esbuild but with this release, esbuild can now parse this syntax correctly.

    • Allow define to match optional chain expressions (#​2324)

      Previously esbuild's define feature only matched member expressions that did not use optional chaining. With this release, esbuild will now also match those that use optional chaining:

      // Original code
      console.log(a.b, a?.b)
      
      // Old output (with --define:a.b=c)
      console.log(c, a?.b);
      
      // New output (with --define:a.b=c)
      console.log(c, c);
      

      This is for compatibility with Webpack's DefinePlugin, which behaves the same way.

    v0.14.45

    Compare Source

    • Add a log message for ambiguous re-exports (#​2322)

      In JavaScript, you can re-export symbols from another file using export * from './another-file'. When you do this from multiple files that export different symbols with the same name, this creates an ambiguous export which is causes that name to not be exported. This is harmless if you don't plan on using the ambiguous export name, so esbuild doesn't have a warning for this. But if you do want a warning for this (or if you want to make it an error), you can now opt-in to seeing this log message with --log-override:ambiguous-reexport=warning or --log-override:ambiguous-reexport=error. The log message looks like this:

      β–² [WARNING] Re-export of "common" in "example.js" is ambiguous and has been removed [ambiguous-reexport]
      
        One definition of "common" comes from "a.js" here:
      
          a.js:2:11:
            2 β”‚ export let common = 2
              β•΅            ~~~~~~
      
        Another definition of "common" comes from "b.js" here:
      
          b.js:3:14:
            3 β”‚ export { b as common }
              β•΅               ~~~~~~
      
    • Optimize the output of the JSON loader (#​2161)

      The json loader (which is enabled by default for .json files) parses the file as JSON and generates a JavaScript file with the parsed expression as the default export. This behavior is standard and works in both node and the browser (well, as long as you use an import assertion). As an extension, esbuild also allows you to import additional top-level properties of the JSON object directly as a named export. This is beneficial for tree shaking. For example:

      import { version } from 'esbuild/package.json'
      console.log(version)
      

      If you bundle the above code with esbuild, you'll get something like the following:

      // node_modules/esbuild/package.json
      var version = "0.14.44";
      
      // example.js
      console.log(version);
      

      Most of the package.json file is irrelevant and has been omitted from the output due to tree shaking. The way esbuild implements this is to have the JavaScript file that's generated from the JSON look something like this with a separate exported variable for each property on the top-level object:

      // node_modules/esbuild/package.json
      export var name = "esbuild";
      export var version = "0.14.44";
      export var repository = "https://github.com/evanw/esbuild";
      export var bin = {
        esbuild: "bin/esbuild"
      };
      ...
      export default {
        name,
        version,
        repository,
        bin,
        ...
      };
      

      However, this means that if you import the default export instead of a named export, you will get non-optimal output. The default export references all top-level properties, leading to many unnecessary variables in the output. With this release esbuild will now optimize this case to only generate additional variables for top-level object properties that are actually imported:

      // Original code
      import all, { bar } from 'data:application/json,{"foo":[1,2,3],"bar":[4,5,6]}'
      console.log(all, bar)
      
      // Old output (with --bundle --minify --format=esm)
      var a=[1,2,3],l=[4,5,6],r={foo:a,bar:l};console.log(r,l);
      
      // New output (with --bundle --minify --format=esm)
      var l=[4,5,6],r={foo:[1,2,3],bar:l};console.log(r,l);
      

      Notice how there is no longer an unnecessary generated variable for foo since it's never imported. And if you only import the default export, esbuild will now reproduce the original JSON object in the output with all top-level properties compactly inline.

    • Add id to warnings returned from the API

      With this release, warnings returned from esbuild's API now have an id property. This identifies which kind of log message it is, which can be used to more easily filter out certain warnings. For example, reassigning a const variable will generate a message with an id of "assign-to-constant". This also gives you the identifier you need to apply a log override for that kind of message: https://esbuild.github.io/api/#log-override.

    v0.14.44

    Compare Source

    • Add a copy loader (#​2255)

      You can configure the "loader" for a specific file extension in esbuild, which is a way of telling esbuild how it should treat that file. For example, the text loader means the file is imported as a string while the binary loader means the file is imported as a Uint8Array. If you want the imported file to stay a separate file, the only option was previously the file loader (which is intended to be similar to Webpack's file-loader package). This loader copies the file to the output directory and imports the path to that output file as a string. This is useful for a web application because you can refer to resources such as .png images by importing them for their URL. However, it's not helpful if you need the imported file to stay a separate file but to still behave the way it normally would when the code is run without bundling.

      With this release, there is now a new loader called copy that copies the loaded file to the output directory and then rewrites the path of the import statement or require() call to point to the copied file instead of the original file. This will automatically add a content hash to the output name by default (which can be configured with the --asset-names= setting). You can use this by specifying copy for a specific file extension, such as with --loader:.png=copy.

    • Fix a regression in arrow function lowering (#​2302)

      This release fixes a regression with lowering arrow functions to function expressions in ES5. This feature was introduced in version 0.7.2 and regressed in version 0.14.30.

      In JavaScript, regular function expressions treat this as an implicit argument that is determined by how the function is called, but arrow functions treat this as a variable that is captured in the closure from the surrounding lexical scope. This is emulated in esbuild by storing the value of this in a variable before changing the arrow function into a function expression.

      However, the code that did this didn't treat this expressions as a usage of that generated variable. Version 0.14.30 began omitting unused generated variables, which caused the transformation of this to break. This regression happened due to missing test coverage. With this release, the problem has been fixed:

      // Original code
      function foo() {
        return () => this
      }
      
      // Old output (with --target=es5)
      function foo() {
        return function() {
          return _this;
        };
      }
      
      // New output (with --target=es5)
      function foo() {
        var _this = this;
        return function() {
          return _this;
        };
      }
      

      This fix was contributed by @​nkeynes.

    • Allow entity names as define values (#​2292)

      The "define" feature allows you to replace certain expressions with certain other expressions at compile time. For example, you might want to replace the global identifier IS_PRODUCTION with the boolean value true when building for production. Previously the only expressions you could substitute in were either identifier expressions or anything that is valid JSON syntax. This limitation exists because supporting more complex expressions is more complex (for example, substituting in a require() call could potentially pull in additional files, which would need to be handled). With this release, you can now also now define something as a member expression chain of the form foo.abc.xyz.

    • Implement package self-references (#​2312)

      This release implements a rarely-used feature in node where a package can import itself by name instead of using relative imports. You can read more about this feature here: https://nodejs.org/api/packages.html#self-referencing-a-package-using-its-name. For example, assuming the package.json in a given package looks like this:

      // package.json
      {
        "name": "a-package",
        "exports": {
          ".": "./main.mjs",
          "./foo": "./foo.js"
        }
      }
      

      Then any module in that package can reference an export in the package itself:

      // ./a-module.mjs
      import { something } from 'a-package'; // Imports "something" from ./main.mjs.
      

      Self-referencing is also available when using require, both in an ES module, and in a CommonJS one. For example, this code will also work:

      // ./a-module.js
      const { something } = require('a-package/foo'); // Loads from ./foo.js.
      
    • Add a warning for assigning to an import (#​2319)

      Import bindings are immutable in JavaScript, and assigning to them will throw an error. So instead of doing this:

      import { foo } from 'foo'
      foo++
      

      You need to do something like this instead:

      import { foo, setFoo } from 'foo'
      setFoo(foo + 1)
      

      This is already an error if you try to bundle this code with esbuild. However, this was previously allowed silently when bundling is disabled, which can lead to confusion for people who don't know about this aspect of how JavaScript works. So with this release, there is now a warning when you do this:

      β–² [WARNING] This assignment will throw because "foo" is an import [assign-to-import]
      
          example.js:2:0:
            2 β”‚ foo++
              β•΅ ~~~
      
        Imports are immutable in JavaScript. To modify the value of this import, you must export a setter
        function in the imported file (e.g. "setFoo") and then import and call that function here instead.
      

      This new warning can be turned off with --log-override:assign-to-import=silent if you don't want to see it.

    • Implement alwaysStrict in tsconfig.json (#​2264)

      This release adds alwaysStrict to the set of TypeScript tsconfig.json configuration values that esbuild supports. When this is enabled, esbuild will forbid syntax that isn't allowed in strict mode and will automatically insert "use strict"; at the top of generated output files. This matches the behavior of the TypeScript compiler: https://www.typescriptlang.org/tsconfig#alwaysStrict.

    v0.14.43

    Compare Source

    • Fix TypeScript parse error whe a generic function is the first type argument (#​2306)

      In TypeScript, the << token may need to be split apart into two < tokens if it's present in a type argument context. This was already correctly handled for all type expressions and for identifier expressions such as in the following code:

      // These cases already worked in the previous release
      let foo: Array<<T>() => T>;
      bar<<T>() => T>;
      

      However, normal expressions of the following form were previously incorrectly treated as syntax errors:

      // These cases were broken but have now been fixed
      foo.bar<<T>() => T>;
      foo?.<<T>() => T>();
      

      With this release, these cases now parsed correctly.

    • Fix minification regression with pure IIFEs (#​2279)

      An Immediately Invoked Function Expression (IIFE) is a function call to an anonymous function, and is a way of introducing a new function-level scope in JavaScript since JavaScript lacks a way to do this otherwise. And a pure function call is a function call with the special /* @&#8203;__PURE__ */ comment before it, which tells JavaScript build tools that the function call can be considered to have no side effects (and can be removed if it's unused).

      Version 0.14.9 of esbuild introduced a regression that changed esbuild's behavior when these two features were combined. If the IIFE body contains a single expression, the resulting output still contained that expression instead of being empty. This is a minor regression because you normally wouldn't write code like this, so this shouldn't come up in practice, and it doesn't cause any correctness issues (just larger-than-necessary output). It's unusual that you would tell esbuild "remove this if the result is unused" and then not store the result anywhere, since the result is unused by construction. But regardless, the issue has now been fixed.

      For example, the following code is a pure IIFE, which means it should be completely removed when minification is enabled. Previously it was replaced by the contents of the IIFE but it's now completely removed:

      // Original code
      /* @&#8203;__PURE__ */ (() => console.log(1))()
      
      // Old output (with --minify)
      console.log(1);
      
      // New output (with --minify)
      
    • Add log messages for indirect require references (#​2231)

      A long time ago esbuild used to warn about indirect uses of require because they break esbuild's ability to analyze the dependencies of the code and cause dependencies to not be bundled, resulting in a potentially broken bundle. However, this warning was removed because many people wanted the warning to be removed. Some packages have code that uses require like this but on a code path that isn't used at run-time, so their code still happens to work even though the bundle is incomplete. For example, the following code will not bundle bindings:

      // Prevent React Native packager from seeing modules required with this
      const nodeRequire = require;
      
      function getRealmConstructor(environment) {
        switch (environment) {
          case "node.js":
          case "electron":
            return nodeRequire("bindings")("realm.node").Realm;
        }
      }
      

      Version 0.11.11 of esbuild removed this warning, which means people no longer have a way to know at compile time whether their bundle is broken in this way. Now that esbuild has custom log message levels, this warning can be added back in a way that should make both people happy. With this release, there is now a log message for this that defaults to the debug log level, which normally isn't visible. You can either do --log-override:indirect-require=warning to make this log message a warning (and therefore visible) or use --log-level=debug to see this and all other debug log messages.


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • chore(deps): update dependency concurrently to v7.2.2

    chore(deps): update dependency concurrently to v7.2.2

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | concurrently | 7.2.1 -> 7.2.2 | age | adoption | passing | confidence |


    Release Notes

    open-cli-tools/concurrently

    v7.2.2

    Compare Source

    What's Changed

    • Update rxjs to version 7.0.0 - #​326
    • Fix TypeScript not able to resolve types when on Node 16 - #​330

    New Contributors


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • chore(deps): update dependency @vscode/test-electron to v2.1.4

    chore(deps): update dependency @vscode/test-electron to v2.1.4

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @vscode/test-electron | 2.1.3 -> 2.1.4 | age | adoption | passing | confidence |


    Release Notes

    Microsoft/vscode-test

    v2.1.4

    Compare Source

    • Fix uncaught error when failing to connect to the extension service

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • chore(deps): update dependency @types/react to v18.0.14

    chore(deps): update dependency @types/react to v18.0.14

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @types/react | 18.0.10 -> 18.0.14 | age | adoption | passing | confidence |


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • chore(deps): pin dependencies

    chore(deps): pin dependencies

    Mend Renovate

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | @esbuild-plugins/node-globals-polyfill | devDependencies | pin | ^0.1.1 -> 0.1.1 | | @esbuild-plugins/node-modules-polyfill | devDependencies | pin | ^0.1.4 -> 0.1.4 | | @iconify-icons/ic | dependencies | pin | ^1.2.5 -> 1.2.5 | | @iconify/json (source) | dependencies | pin | ^2.1.56 -> 2.1.56 | | @iconify/react (source) | dependencies | pin | ^3.2.2 -> 3.2.2 | | @iconify/types | dependencies | pin | ^1.1.0 -> 1.1.0 | | @timohausmann/quadtree-ts | dependencies | pin | ^2.0.0-beta.1 -> 2.0.0-beta.1 | | @tippyjs/react | dependencies | pin | ^4.2.6 -> 4.2.6 | | @types/chokidar | devDependencies | pin | ^2.1.3 -> 2.1.3 | | @types/codemirror | dependencies | pin | ^5.60.5 -> 5.60.5 | | @types/glob | devDependencies | pin | ^7.2.0 -> 7.2.0 | | @types/hast | dependencies | pin | ^2.3.4 -> 2.3.4 | | @types/hast | devDependencies | pin | ^2.3.4 -> 2.3.4 | | @types/lodash | dependencies | pin | ^4.14.182 -> 4.14.182 | | @types/lodash-es | dependencies | pin | ^4.17.6 -> 4.17.6 | | @types/minimatch | devDependencies | pin | ^3.0.5 -> 3.0.5 | | @types/mocha | devDependencies | pin | ^9.1.1 -> 9.1.1 | | @types/node | devDependencies | pin | 17.x -> 17.0.38 | | @types/prettier | devDependencies | pin | ^2.6.3 -> 2.6.3 | | @types/react | devDependencies | pin | ^18.0.10 -> 18.0.10 | | @types/react-dom | devDependencies | pin | ^18.0.5 -> 18.0.5 | | @types/serve-handler | dependencies | pin | ^6.1.1 -> 6.1.1 | | @types/shelljs | devDependencies | pin | ^0.8.11 -> 0.8.11 | | @types/styled-components | devDependencies | pin | ^5.1.25 -> 5.1.25 | | @types/vscode | devDependencies | pin | ^1.67.0 -> 1.67.0 | | @types/vscode-webview | dependencies | pin | ^1.57.0 -> 1.57.0 | | @types/wicg-file-system-access | devDependencies | pin | ^2020.9.5 -> 2020.9.5 | | @typescript-eslint/eslint-plugin | devDependencies | pin | ^5.27.0 -> 5.27.0 | | @typescript-eslint/parser | devDependencies | pin | ^5.27.0 -> 5.27.0 | | @vitejs/plugin-react | devDependencies | pin | ^1.3.2 -> 1.3.2 | | @vscode/test-electron | devDependencies | pin | ^2.1.3 -> 2.1.3 | | buffer | dependencies | pin | ^6.0.3 -> 6.0.3 | | codemirror | dependencies | pin | ^5.65.5 -> 5.65.5 | | comlink | dependencies | pin | ^4.3.1 -> 4.3.1 | | commander | devDependencies | pin | ^9.3.0 -> 9.3.0 | | concurrently | devDependencies | pin | ^7.2.1 -> 7.2.1 | | css-loader | devDependencies | pin | ^6.7.1 -> 6.7.1 | | css-what | dependencies | pin | ^6.1.0 -> 6.1.0 | | csstype | dependencies | pin | ^3.1.0 -> 3.1.0 | | dedent | dependencies | pin | ^0.7.0 -> 0.7.0 | | dedent | devDependencies | pin | ^0.7.0 -> 0.7.0 | | esbuild | devDependencies | pin | ^0.14.42 -> 0.14.42 | | eslint (source) | devDependencies | pin | ^8.16.0 -> 8.16.0 | | glob | devDependencies | pin | ^8.0.3 -> 8.0.3 | | globby | dependencies | pin | ^13.1.1 -> 13.1.1 | | hast-util-from-parse5 | dependencies | pin | ^7.1.0 -> 7.1.0 | | hast-util-from-parse5 | devDependencies | pin | ^7.1.0 -> 7.1.0 | | hast-util-to-html | dependencies | pin | ^8.0.3 -> 8.0.3 | | hast-util-to-html | devDependencies | pin | ^8.0.3 -> 8.0.3 | | hastscript | dependencies | pin | ^7.0.2 -> 7.0.2 | | html-tags | dependencies | pin | ^3.2.0 -> 3.2.0 | | iconify-icon (source) | dependencies | pin | ^0.0.6 -> 0.0.6 | | lerna (source) | devDependencies | pin | ^5.1.1 -> 5.1.1 | | lodash (source) | dependencies | pin | ^4.17.21 -> 4.17.21 | | lodash-es (source) | dependencies | pin | ^4.17.21 -> 4.17.21 | | lodash-es (source) | devDependencies | pin | ^4.17.21 -> 4.17.21 | | minimatch | devDependencies | pin | ^5.1.0 -> 5.1.0 | | mobx (source) | dependencies | pin | ^6.6.0 -> 6.6.0 | | mobx-react-lite (source) | dependencies | pin | ^3.4.0 -> 3.4.0 | | mocha (source) | devDependencies | pin | ^10.0.0 -> 10.0.0 | | monaco-editor | dependencies | pin | ^0.33.0 -> 0.33.0 | | npm-run-all | devDependencies | pin | ^4.1.5 -> 4.1.5 | | paintvec | dependencies | pin | ^0.4.0 -> 0.4.0 | | parse5 | dependencies | pin | ^7.0.0 -> 7.0.0 | | parse5 | devDependencies | pin | ^7.0.0 -> 7.0.0 | | postcss (source) | dependencies | pin | ^8.4.14 -> 8.4.14 | | prettier (source) | devDependencies | pin | ^2.6.2 -> 2.6.2 | | prettier (source) | dependencies | pin | ^2.6.2 -> 2.6.2 | | property-information | dependencies | pin | ^6.1.1 -> 6.1.1 | | react (source) | dependencies | pin | ^18.1.0 -> 18.1.0 | | react-dom (source) | dependencies | pin | ^18.1.0 -> 18.1.0 | | rehype-minify-whitespace | dependencies | pin | ^5.0.1 -> 5.0.1 | | remote-methods | dependencies | pin | ^1.0.1 -> 1.0.1 | | replace-css-url | dependencies | pin | ^1.2.6 -> 1.2.6 | | replace-css-url | devDependencies | pin | ^1.2.6 -> 1.2.6 | | rollup-plugin-node-polyfills | devDependencies | pin | ^0.2.1 -> 0.2.1 | | scroll-into-view-if-needed (source) | dependencies | pin | ^2.2.29 -> 2.2.29 | | serve | dependencies | pin | ^13.0.2 -> 13.0.2 | | serve-handler | dependencies | pin | ^6.1.3 -> 6.1.3 | | shelljs | devDependencies | pin | ^0.8.5 -> 0.8.5 | | short-uuid | dependencies | pin | ^4.2.0 -> 4.2.0 | | style-loader | devDependencies | pin | ^3.3.1 -> 3.3.1 | | styled-components (source) | dependencies | pin | ^5.3.5 -> 5.3.5 | | svg-parser | dependencies | pin | ^2.0.4 -> 2.0.4 | | tiny-typed-emitter | dependencies | pin | ^2.1.0 -> 2.1.0 | | tippy.js (source) | dependencies | pin | ^6.3.7 -> 6.3.7 | | tmp-promise | devDependencies | pin | ^3.0.3 -> 3.0.3 | | ts-loader | devDependencies | pin | ^9.3.0 -> 9.3.0 | | typescript (source) | devDependencies | pin | ^4.7.2 -> 4.7.2 | | ua-parser-js | dependencies | pin | ^1.0.2 -> 1.0.2 | | unified (source) | dependencies | pin | ^10.1.2 -> 10.1.2 | | unist-util-inspect | dependencies | pin | ^7.0.0 -> 7.0.0 | | validate-element-name | dependencies | pin | ^3.0.0 -> 3.0.0 | | vite | devDependencies | pin | ^2.9.9 -> 2.9.9 | | vite-plugin-singlefile | devDependencies | pin | ^0.9.0 -> 0.9.0 | | vite-svg-loader | devDependencies | pin | ^3.3.0 -> 3.3.0 | | vitepress | devDependencies | pin | ^1.0.0-alpha.1 -> 1.0.0-alpha.1 | | vitest | devDependencies | pin | ^0.13.1 -> 0.13.1 | | vsce (source) | devDependencies | pin | ^2.9.1 -> 2.9.1 | | wsrun | devDependencies | pin | ^5.2.4 -> 5.2.4 |

    Add the preset :preserveSemverRanges to your config if you don't want to pin your dependencies.


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about these updates again.


    • [x] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • Support custom-elements.json

    Support custom-elements.json

    Description

    Make use of custom-elements.json, which is defined in custom-elements-manifest

    • Emit custom-elements.json
    • Generate metadata from custom-elements.json of external component libraries
    enhancement priority:low 
    opened by seanchas116 0
  • Import Web Components to editor from Vite (or other devservers)

    Import Web Components to editor from Vite (or other devservers)

    Description

    Add ability to import Web Components from Vite devserver

    Motivation

    • Import Web Components created in the same project
    • This would be convenient especially if you are using Vue or Svelte to implement Web Components
    enhancement package:editor package:vscode 
    opened by seanchas116 0
  • Expose attributes and events of inner elements

    Expose attributes and events of inner elements

    opened by seanchas116 0
Releases(v0.5.0)
Owner
Macaron
Visual component editor for Web development
Macaron
Create sticky element in flexbox sidebars. it can use in Vanilla JS and frameworks like Vue and React

js sticky side simple sticky side with js that can use in frameworks like vue and react. notes it can be used just in flexbox grids. target element sh

milad nazari 10 Mar 3, 2022
The most often-used OOP design patterns in TypeScript

The most often-used OOP design patterns Generating patterns Factory method Abstract factory Builder Prototype Singleton Structural patterns Adapter Br

Rodion 4 Mar 11, 2022
A native, pure and exquisite web components library which can be used anywhere.

What Is This ? This is a project on pure web components merely using native HTML、CSS and JavaScript technologies. It has features below: based on web

PARANOIA 14 Nov 16, 2022
Shikhar 4 Oct 9, 2022
Browser Extension to deliver AI-generated alt-text for the Visually Impaired.

GenAlt - Generated Image Descriptions for BVI The Blind and Visually Impaired (BVI) rely on alt-text, image descriptions, to experience the trillions

Anish 11 Sep 10, 2022
Visually manage your ZooKeeper in Visual Studio Code.

Visual ZooKeeper Visually manage your ZooKeeper in Visual Studio Code. Features ?? Edit and view data on ZooKeeper using the perfect VSCode's editor.

Gao Liang 4 Sep 5, 2022
JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

Rajkumar Dusad 36 Jan 5, 2023
Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scalable code in e-commerce applications.

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates a

Ivan Kuznietsov 3 Feb 8, 2022
This package will help parse OData strings (only the Microsoft Dataverse subset). It can be used as a validator, or you can build some javascript library which consumes the output of this library.

@albanian-xrm/dataverse-odata This package will help parse OData strings (only the Microsoft Dataverse subset). It can be used as a validator, or you

AlbanianXrm 3 Oct 22, 2022
Discover a vast library of open-source Tailwind CSS components and Mobile UI design elements πŸš€

SundarUI ?? Discover a vast library of open-source Tailwind CSS components and Mobile UI design elements ?? What is SundarUI? Sundar UI is a library o

Raj Patel 4 Mar 19, 2023
Encode WEB-Dev is a open source project which contains different projects of Html, CSS, Javascript and MERN Stack etc.

HACKTOBERFEST 2022 Encode WEB-Dev is an open source project which contains different projects of Html, CSS, Javascript and MERN Stack etc. which makes

null 7 Oct 31, 2022
The PatternFly Design Kit is a Sketch library used for creating PatternFly accurate design mockups

PatternFly Design Kit The PatternFly Design Kit is a collection of Sketch assets that make it easy for designers to create high-fidelity design mockup

PatternFly 44 Jan 2, 2023
Reference for How to Write an Open Source JavaScript Library - https://egghead.io/series/how-to-write-an-open-source-javascript-library

Reference for How to Write an Open Source JavaScript Library The purpose of this document is to serve as a reference for: How to Write an Open Source

Sarbbottam Bandyopadhyay 175 Dec 24, 2022
This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do any operations that can be performed in python shell with this package.

Django execute code This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do

Shinu 5 Nov 12, 2022
Open Source projects are a project to improve your JavaScript knowledge with JavaScript documentation, design patterns, books, playlists.

It is a project I am trying to list the repos that have received thousands of stars on Github and deemed useful by the JavaScript community. It's a gi

Cihat Salik 22 Aug 14, 2022
This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js. But in most cases, I would recommend you to use something like Express in a production project for productivity purposes.

Eduardo Dantas 7 Jul 19, 2022
this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With ?? HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Nedjwa Bouraiou 10 Aug 3, 2022