Multiple new settings, app components import, multiple format exports, static folder, ...

packages/core/CHANGELOG.md

@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Support to import custom `SideBar` component in `app/` folder that replaces sidebar in Mechanic UI.
+- New design function export `ExtraUi`, expected to be a React component that's added to the bottom section of sidebar, on top of default toggles and buttons.
+- Support for SVG and PNG exports for SVG based engines like `engine-react` and `engine-svg`.
+- New `hideFeedback` design function setting. When true, Mechanic's feedback button is hidden. Defaults to false.
+- New `hideNavigation` design function setting. When true, the navigation input that let's users select a design function is hidden. Defaults to false.
+- New `hidePresets` design function setting. When true, preset selection input is hidden. Defaults to false.
+- New `hideScaleToFit` design function setting. When true, Scale to Fit toggle is hidden. Defaults to false.
+- New `scaleToFit` design function setting. When false, Scale to Fit will be off initially. Defaults to true.
+- New `hideAutoRefresh` design function setting. When true, Auto Refresh toggle is hidden. Defaults to false.
+- New `autoRefresh` design function setting. When false, Auto Refresh will be off initially. Defaults to true.
+- New `hideGenerate` design function setting. When true, Generate button is hidden. Defaults to false.
+- New `showMultipleExports` design function setting. When false, single export button is shown. When true, two separate export buttons are shown: one for PNG export and another for SVG export. Defaults to false.
+- New `ignoreStyles` design function setting. When true, CSS in iframe is injected into design function's SVG output. Defaults to false.
+- Support to serve `static/` folder for all design functions.
+- `_isPreview` value is passed to design function handler in `inputs` argument.
+
 ### Changed
 
 - Changed filename from `[name][timestamp].[ext]` to `[filename]-[timestamp].[ext]` for better readability

packages/core/app/App.js

@@ -11,10 +11,14 @@ import functions from "./FUNCTIONS";
 import * as css from "./App.module.css";
 
 const Layout = ({ funcName, functions, mainRef, iframeRef }) => {
+  const { settings } = functions[funcName];
   return (
     <div className={css.root}>
+      {!settings.hideFeedback && (
+        <Feedback href="https://forms.gle/uBTn8oVThZHVghV89">Got feedback?</Feedback>
+      )}
       <SideBar name={funcName} exports={functions[funcName]} iframe={iframeRef} mainRef={mainRef}>
-        <Nav name={funcName} functions={functions} />
+        {!settings.hideNavigation && <Nav name={funcName} functions={functions} />}
       </SideBar>
       <main className={css.main} ref={mainRef}>
         <iframe
@@ -34,7 +38,6 @@ const AppComponent = () => {
   const firstFunctionName = Object.keys(functions)[0];
   return (
     <div className={css.base}>
-      <Feedback href="https://forms.gle/uBTn8oVThZHVghV89">Got feedback?</Feedback>
       <Switch>
         {Object.keys(functions).map((name, i) => (
           <Route

packages/core/app/app-components-loader.cjs

@@ -0,0 +1,13 @@
+const path = require("path");
+const { getOptions } = require("loader-utils");
+
+module.exports = function () {
+  const { appCompsPath } = getOptions(this);
+
+  const result = `
+import * as components from "${appCompsPath.split(path.sep).join("/")}";
+export const appComponents = components;
+`;
+  // console.log(result);
+  return result;
+};