DEV Community: CamelJohn

styled-components - avoiding transient props

CamelJohn — Thu, 22 Sep 2022 08:38:36 +0000

so, I had this error - where the gist is that react is throwing an error that 'prop_whatever' is not a know prop (DOM wise).

this is a styled-components error in the end.

what was happening was those props where being used, in a logic layer, but, propagated to the underlying VDOM representation of a DOM element, meaning - that said props would "bleed" into the real DOM - no cool.

.withConfig to the rescue - basically a chained function exported by the good people at styled-components where one of the fields accepts some sort of filter function, to decide wether forwarding this prop will happen or not.

so here's my function:

export function preventTransientPropForwarding(prop: string) {
  return ![/anyPropYouWouldNotLikeToTransfer/].some(regEx => regEx.test(prop);
}

and the implementation would simply look like so:

const SomeStyleComponentsComponent = styled(Extended3rdPartyComponent).withConfig({
    shouldForwardProp: (prop) => preventTransientPropForwarding(prop),
})``;

although the API will tell you to prefix props with $ to prevent the propagation, that is still manual.

unfortunately, this is very tedious and manual.

so, here's another solution i've implemented:

basically - you will override the default styled object.


import _styled, { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';

export function styled(
    element:
        | AnyStyledComponent
        | keyof JSX.IntrinsicElements
        | React.ComponentType<any>
): ThemedStyledFunction<
    typeof element,
    any,
    object,
    string | number | symbol
> {
    return _styled(element).withConfig({
        shouldForwardProp: (prop: any) => !preventPropLeak(prop),
    });
}

now, check this out! you get auto-completion out of the box, and you can use 3rd party UI components, and extend them using your function.

the only caveat is, you will no longer be able to do something like styled.div but would rather have to conform to styled('div');

why would you do this ?

simple - I'm working with vscode, and i have the styled-components extension that allows me to write emmet css, to code faster and get some auto-completion for my css and not just for component types.

hope you liked this solution !

not my best...but still, works if you need it.

SVG Custom Componet

CamelJohn — Mon, 19 Sep 2022 18:11:21 +0000

So, today I'm here to share about using SVG in React (with Vite).

For those of us who know, or don't know - svg are highly scalable (that's what the S stands for in SVG) vector graphics, and very useful.

they might feel intimidating, but once you get over yourself, they're quite fun, and you keep asking yourself how you ever did without them.

I love using javascript in conjunction with **typescript** helps the team develop a common language to work with (interfaces).

I feel that typescript serves a multitude of purposes, but, let's not forget it's not a real safety net - but more of a convenience. In the real world I'd advocate using something like joi or zod or other javascript type-checking libs.

so here's the stack:

vite
react
typescript
styled-components

there's a whole list, but we'll focus on these.

my use case is - wanting to create a generic (enough) SVG component, so that anyone trying to implement one - doe's not need to know what is available, but rather have autocompletion.

first, grab some svg's, maybe put them in your public folder.
make sure to scrub them down for any fill rules or strokes. makes the overrides easier.

styled-components is nice to have but you could go with scss or vanilla css - to grab nested svg elements.

here's the a breakdown of said component:

so, let's go over what we've done here:

first of all we're importing the SVG's as React components (keep in mind that there are other ways to harness the power of svg in react, as well as vite - that offers us a multitude of solutions I won't delve into in this post.

import { ReactComponent as Avatar } from '/public/avatar.svg';
import { ReactComponent as Dashboard } from '/public/dashboard.svg';
import { ReactComponent as Diamond } from '/public/dimond.svg';
import { ReactComponent as EmptyGames } from '/public/empty-games.svg';
import { ReactComponent as Logo } from '/public/is-logo.svg';
import { ReactComponent as Rocket } from '/public/rocket.svg';
import { ReactComponent as Text } from '/public/text.svg';
import { ReactComponent as NewWindow } from '/public/new-window.svg';
import { ReactComponent as PercentageCake } from '/public/percentage-cake.svg';
import { ReactComponent as NoData } from '/public/no-data.svg';
import { ReactComponent as Menu } from '/public/menu.svg';
import { ReactComponent as Breakdown } from '/public/breakdown.svg';
import { ReactComponent as Profile } from '/public/profile.svg';
import { ReactComponent as ClosedMenu } from '/public/menu-closed.svg';
import { ReactComponent as Collection } from '/public/apps.svg';
import { ReactComponent as Upload } from '/public/upload.svg';
import { ReactComponent as Empty } from '/public/empty.svg';
import { ReactComponent as Cart } from '/public/cart.svg';
import { ReactComponent as Collections } from '/public/collections.svg';
import { ReactComponent as Megaphone } from '/public/megaphone.svg';
import { ReactComponent as Wallet } from '/public/wallet.svg';
import { ReactComponent as Console } from '/public/console.svg';
import { ReactComponent as Back } from '/public/back.svg';

next we're defining a component descriptor type - this is to help us for the SVG Record definition later, basically this is what the value of each key will be holding on that object.

type SVGComponentDescriptor = 
React.FunctionComponent<React.SVGProps<SVGSVGElement> 
& { title?: string | undefined; }>;

we then proceed to map each key in the SVGKey type, this will be the actual autocompletion, so no real tricks here.

export type SVGKey =
    | 'Avatar'
    | 'Collection'
    | 'Dashboard'
    | 'Upload'
    | 'Diamond'
    | 'EmptyGames'
    | 'Logo'
    | 'Rocket'
    | 'Text'
    | 'NewWindow'
    | 'PercentageCake'
    | 'NoData'
    | 'Menu'
    | 'Breakdown'
    | 'Profile'
    | 'ClosedMenu'
    | 'Wallet'
    | 'Cart'
    | 'Collections'
    | 'Megaphone'
    | 'Console'
    | 'Back'
    | 'Empty';

next, we'll define the props for the component, as you can see, it's a merge of the custom type prop, i've added, and react-typescript's own definition of what SVG props should look like on an svg element.

type SVGProps = { type: SVGKey; } & React.SVGProps<SVGSVGElement>;

next up we have the SVG object, to be accessed by key-value pairs.

export const SVG: Record<string, SVGComponentDescriptor> = {
    Avatar,
    Collection,
    Dashboard,
    Upload,
    Diamond,
    EmptyGames,
    Logo,
    Rocket,
    Text,
    NewWindow,
    PercentageCake,
    NoData,
    Menu,
    Breakdown,
    Profile,
    ClosedMenu,
    Empty,
    Megaphone,
    Wallet,
    Cart,
    Collections,
    Console,
    Back,
};

last, we have the exported component:

export default function FlameSVG(props: SVGProps) {
    const { type, ...otherProps } = props;
    const SVGComponent = SVG[type];
    return <SVGComponent {...otherProps} />;

so, what we've done here is accept a merged set of props, made up from react implementation of the DOM svg props, and our own custom type.

we then "pluck" out the type prop, so that we can use it, as well as not propagate it to the DOM element which does not know this prop (react should throw an error if you do), and use the rest operator for the rest of the props.

this mean's we have full autocompletion for any svg props we'd like to use, as well as the type props.

we then access the SVG object Record we've created before, and it returns us a JSX SVG element (not really JSX, but I can't remember the proper definition at this moment).

that is what we return, in addition, we spread out the DOM props, that might have been used into the svg component. and voila ! auto completion, of both native props, as well as control over what svg will be returned in the DOM.

hope you found this useful, try It out, let me know what you think.

NextJS - (v11) don't use Image components in conjunction with the `export` command.

CamelJohn — Fri, 05 Nov 2021 20:58:37 +0000

So,

I'm rewriting this post. after I did some more reading and digging, and posting in my online programming community.

Gotta say, I'm pretty heart-broken over the NextJS framework.

With all it's bells an whistles, the stipulate in various places in their doc that the Image component is not supported in the next export command.

They do give some sort of inklink of a fix, by using custom loaders to solve this issue - but there is now example, no deep dive into how to implement such a solution.

I will try to implement such a solution myself, and will get back to you with some implementation.

Images on an SSR framework seem like such a fundamental thing.

NodeJS To Run C++ Executable

CamelJohn — Sun, 05 Jul 2020 17:17:52 +0000

So, I've been working on a cool project involving:

Raspberry PI
NodeJS
Linux (Raspbian)
LibCEC (cec-client)
PM2

and many more goodies.

during the process I've encountered a few bugs.

I have a NodeJS instance being run by PM2 on a linux machine (Raspberry PI) & I need to pass linux various commands.
One of them being a long runing process (hopefully forever) without closing that process, and yet run other non-blocking code.

most of my commands to the Raspberry PI will be bash commands.

so I dove into child process (comes with Node out of the box).

the child process has a few functions - that allow you to pass bash commands or run a local file (be it a .cpp file, or a .sh file).

so how would i do all of this ?

const { execFile } = require('child_process');

const compiler = "g++";
const version = "-std=c++11";
const out ="-o";
const infile = "code-runner.cpp";
const outfile = "code-runner.out";
const command = "hello world";

execFile(compiler, [version,infile, out, outfile], (err, stdout, stderr) => {
  if (err) {
    console.log(err);
  } else {
    let executable = `./${outfile}`;
    execFile(executable, (err, stdout, stderr) => {
      if (err) {
        console.log(err);
      } else {
        execFile("echo", [command], { shell: true }, (err, stdout, stderr) => {
          if (err) {
            console.log(err);
          } else {
            console.log(`what is printed to the console: ${stdout}`);
          }
        });
      }
    })
  }
})

what we are looking at is missing some code, in my case i chose to use some c++ (nothing fancy):

#include <iostream>

int main(int argc, const char* argv[]) {
  auto input = "";

  if (argc > 1) {
    input = argv[1];
  }

  std::cout << input << std::endl;
}

bassically the first Node code is using the execFile command, to compile the c++ file, and then run it and pass some arguments to it (in this case the echo command, with hello world as an argument).

the c++ code takes the second argument and prints it out to the console.

of course there are various ways of doing so.

but this should be a good start.

hope you enjoyed this one.

at some point I might do a series on the whole Child Process module, as well as he Cluster Module, and a few mor Node goodies.

Nodejs Seqeulize mssql sql server Azure project

CamelJohn — Sun, 17 May 2020 06:13:39 +0000

Hi all,

So, I've been working on a project for work, I'm stuck and I'd love some help. I've been crawling the web manually for some answers, opened gitHub issues, turned stackoverflow updside down - now it's Dev.to's turn to work some magic !

I have a nodejs server with the following package.json:

    "axios": "^0.19.2",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "formdata-node": "^2.1.1",
    "jsonwebtoken": "^8.5.1",
    "mssql": "^6.1.0",
    "nodemailer": "^6.4.5",
    "sequelize": "^5.21.7",
    "tedious": "^8.0.1",
    "uuid-token-generator": "^1.0.0"

so what's the problem ?

I have a SQL server (2000) on my Azure cloud.
While testing my local nodejs on the Azure SQL DB all went well.

When I deployed my nodejs to azure - all hell broke loose:

Error: Please install tedious package manually
   at ConnectionManager._loadDialectModule (D:\home\site\wwwroot\node_modules\sequelize\lib\dialects\abstract\connection-manager.js:81:15)
   at new ConnectionManager (D:\home\site\wwwroot\node_modules\sequelize\lib\dialects\mssql\connection-manager.js:17:21)
   at new MssqlDialect (D:\home\site\wwwroot\node_modules\sequelize\lib\dialects\mssql\index.js:14:30)
   at new Sequelize (D:\home\site\wwwroot\node_modules\sequelize\lib\sequelize.js:324:20)
   at Object.<anonymous> (D:\home\site\wwwroot\util\database.js:3:19)
   at Module._compile (internal/modules/cjs/loader.js:956:30)
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
   at Module.load (internal/modules/cjs/loader.js:812:32)
   at Function.Module._load (internal/modules/cjs/loader.js:724:14)
   at Module.require (internal/modules/cjs/loader.js:849:19)
   at require (internal/modules/cjs/helpers.js:74:18)
   at Object.<anonymous> (D:\home\site\wwwroot\server.js:6:19)
   at Module._compile (internal/modules/cjs/loader.js:956:30)
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
   at Module.load (internal/modules/cjs/loader.js:812:32)
   at Function.Module._load (internal/modules/cjs/loader.js:724:14)
   at Module.require (internal/modules/cjs/loader.js:849:19)
   at require (internal/modules/cjs/helpers.js:74:18)
   at Object.<anonymous> (D:\Program Files (x86)\iisnode\interceptor.js:459:1)
   at Module._compile (internal/modules/cjs/loader.js:956:30)
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
   at Module.load (internal/modules/cjs/loader.js:812:32)
Application has thrown an uncaught exception and is terminated:
Error: Please install tedious package manually
   at ConnectionManager._loadDialectModule (D:\home\site\wwwroot\node_modules\sequelize\lib\dialects\abstract\connection-manager.js:81:15)
   at new ConnectionManager (D:\home\site\wwwroot\node_modules\sequelize\lib\dialects\mssql\connection-manager.js:17:21)
   at new MssqlDialect (D:\home\site\wwwroot\node_modules\sequelize\lib\dialects\mssql\index.js:14:30)
   at new Sequelize (D:\home\site\wwwroot\node_modules\sequelize\lib\sequelize.js:324:20)
   at Object.<anonymous> (D:\home\site\wwwroot\util\database.js:3:19)
   at Module._compile (internal/modules/cjs/loader.js:956:30)
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
   at Module.load (internal/modules/cjs/loader.js:812:32)
   at Function.Module._load (internal/modules/cjs/loader.js:724:14)
   at Module.require (internal/modules/cjs/loader.js:849:19)
   at require (internal/modules/cjs/helpers.js:74:18)
   at Object.<anonymous> (D:\home\site\wwwroot\server.js:6:19)
   at Module._compile (internal/modules/cjs/loader.js:956:30)
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
   at Module.load (internal/modules/cjs/loader.js:812:32)
   at Function.Module._load (internal/modules/cjs/loader.js:724:14)
   at Module.require (internal/modules/cjs/loader.js:849:19)
   at require (internal/modules/cjs/helpers.js:74:18)
   at Object.<anonymous> (D:\Program Files (x86)\iisnode\interceptor.js:459:1)
   at Module._compile (internal/modules/cjs/loader.js:956:30)
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
   at Module.load (internal/modules/cjs/loader.js:812:32)

can anyone make any sense of this ?

Laravel course project

CamelJohn — Fri, 30 Aug 2019 13:16:34 +0000

So, i'm a student of information systems and for the course we need to build a web based application using Laravel framework (v 5.8) for our course project.

Things I've used for this project

Scss - Black Dashboard Theme:
https://www.creative-tim.com/product/black-dashboard-laravel
credits to creative-tim, looks good and I've learned quite a bit from the coding there.

ChartJS - https://www.chartjs.org/docs/latest/ learned quite a bit from the documentation on graphs, rendering them and their characteristics, as well as @arielsalvadordev's post here on dev.to (my first post read here), who was more than helpful on the subject.

any help on how to use more advanced functions to render the charts via php/controller would be welcome.

Things i need help implementing in my project

Laravel-Grid - a specific demand to implement Leantony's laravel-grid presented on github : https://github.com/leantony/laravel-grid

I've tried the "How to" but for some reason nothing happens.

google Calendar - for this one I will need to elaborate on the app we're building:

about the app itself

the app is for organization's that manage meetings and handle employee tasks related to specific meetings as well as an overall overview of tasks to optimize the organization's efficiency. the calendar comes into play when we want to manage an employees meetings - and possibly grab all the meeting events and details and pass them as an .ics file to that persons google calendar offsite from our app.

time picker - just a good looking time picker and none of that basic html nonsense but rather one of them clocks where you click on the hour and then on the minutes.

a mailing service - possibly mailgun or something else

all of this needs to be laravel/php compatible.
I must say I've rendered the grid using a controller and some functions rather than using JS since the data passed to the charts needs to be coming from the DB itself (phpmyadmin/MySQL).

the app itself has a robust set of models, model-relations, controllers and so on.

any help would be welcome.

thank you for helping me make my first steps into the web-dev community.