Work Diary/Feedback Thread

thedonquixotic · 24 October 2019 20:28

DAILY THOUGHTS CONTINUED:

Okay so I’m kinda going through all the components and trying to simplify and reorder things according to the needs of the theme I’m working on, and also as a way of better understanding and learning the specifics of how things work in Frontity.
In the nav the menu links look like this in the mars theme:

<Item key={name} isSelected={state.router.link === link}>
        <Link link={link}>{name}</Link>
</Item>

I decided I wanted to simplify it down to just Link so that I didn’t get unnecessary extra layers. So I try this:

<Link key={name} isSelected={state.router.link === link} link={link}>
        {name}
      </Link>

But it does not work

Not sure why.

When I print {state.router.link} the result I get is “/about-us/” and when I print {link} I get “/about-us”.

I’ve tried to add an extra slash on the end of the {link} in the comparison but that also does not work even though I get identical prints from link and state.router.link when I do that.

-------EDIT:

Okay I’ve tried to simplify it even more. Still isn’t working consistently. When the menu item for the frontpage is selected then it is blue but when the about-us page is selected it remains purple.

const Nav = ({ state }) => (
  <NavList className="nav-list">
    {state.theme.menu.map(([name, link]) => (
      <NavItem key={name} isSelected={state.router.link === link} link={link}>
        {name}
      </NavItem>
    ))}
  </NavList>
);

export default connect(Nav);

const NavList = styled.nav`
  display: flex;
  box-sizing: border-box;
  padding: 0 24px;
  margin: 0;
  overflow-x: auto;
`;

const NavItem = styled(Link)`
  transition: all 0.25s 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  color: ${({ isSelected }) => (isSelected ? "blue" : "purple")} !important;
  border-bottom: 3px solid transparent;
  padding: 0.1em 0.25em 0 0.25em;
  margin: auto 0.25em;
  &:hover {
    border-bottom: 3px solid #1f38c5;
    transition: all 0.25s 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }
`;

luisherranz · 25 October 2019 09:25

Do the links of your state.theme.menu array contains ending slashes? Maybe that’s the problem.

luisherranz · 25 October 2019 13:21

Some good news here. After debugging the emotion library I was able to spot the problem and solve it with a custom babel plugin.

When we release this fix, the React component name will appear in the class name:

And you will be able to open the exact file where the React component is located when clicking on the element:

com-video-to-gif%20(1)

You can follow the progress in this pull request:

thedonquixotic · 25 October 2019 19:52

Awesome this looks great!

(EDIT: be sure to check the EDITS appended to this reply for the latest info)

Also I just started getting these build errors I’m double checking stuff via google and the error message but not sure what the cause is:

┌─    /mnt/c/Users/aslan/home/work/labs-website                                                                                        
└─➤ npx frontity dev 


SERVER STARTED -- Listening @ http://localhost:3000
  - mode: development
  - target: module


webpack built client 9d55189ace16b299fa73 in 13733ms 
ℹ ｢wdm｣: Child client: 
                     Asset      Size        Chunks             Chunk Names
         archive.module.js  23.6 KiB       archive  [emitted]  archive
    labs-website.module.js  3.87 MiB  labs-website  [emitted]  labs-website
     + 1 hidden asset
Child server:
        Asset      Size  Chunks             Chunk Names 
    server.js  6.39 MiB    main  [emitted]  main
ℹ ｢wdm｣: Compiled successfully.

  TypeError: Cannot read property 'source' of undefined 
      at Theme (webpack-internal:///./packages/labs-website/src/components/index.js:13:42)
      at runAsReaction (webpack-internal:///./packages/labs-website/node_modules/@frontity/connect/src/reactionRunner.js:16:45)
      at reaction (webpack-internal:///./packages/labs-website/node_modules/@frontity/connect/src/observer.js:7:131)
      at props (webpack-internal:///./packages/labs-website/node_modules/@frontity/connect/src/connect.js:18:8)
      at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:482:2385)
      at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:481:122)
      at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:518:1153)      
      at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:518:55)
      at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:557:116)
      at app.use (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:47:243)

I tried following the advice in this thread: Cannot read property 'frontity' of undefined

and this guide: https://docs.frontity.org/guides/keep-frontity-updated

and neither of those things ended up fixing the issue.

EDIT1:

Okay so I created a brand new frontity server using the cli create frontity command and I moved over my theme to that new location and got it working there.

I’m not totally clear on what the problem was but I think it was caused by incompatible versions or double installs of react and/or perhaps compatiblity issues between the version of frontity I was using on my work computer versus my home computer (work computer is a mac, home computer is a Windows Subystem Layer install of Ubuntu)

I am still getting the following error results despite the successful build.

Error: post type from endpoints "posts,pages,media" with slug "e3ae9ef6b9b0c063645f.hot-update.json" not found 
    at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:8:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)
Error: post type from endpoints "posts,pages,media" with slug "e3ae9ef6b9b0c063645f.hot-update.json" not found 
    at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:8:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)

EDIT2:

I’m going to continue my work diary below but the follow doesn’t have a whole lot to do with the above problems.

The isSelected issue has cleared up! IDK why exactly, maybe it was an update to Frontity?
I realize that there’s been some additions to mars-theme since I started building my own theme from it. I think I might try to refork mars-theme and migrate my changes over so that I can take advantage of those new features while still maintaining the changes I’ve made structurally.

luisherranz · 28 October 2019 17:18

You are right, it’s a problem with a double install of @frontity/connect.

I think it happens when you have two different versions of the main frontity package in the root and inside a package.

I’m going to move all the frontity dependencies in packages to peerDependencies and I think that should solve this problem for good. I’m sorry about it.

That error is different. It appears when

You run Frontity in dev mode
Localhost is connected to the server for HMR (hot module replacement)
You stop the server.
Localhost tries to reconnect.
You start the server again.
Somehow, the HMR request of the old localhost goes thru webpack-dev-server and ends up in Frontity and it thinks it is trying to fetch a new page.

Long story short, we should filter those URLs

thedonquixotic · 29 October 2019 00:22

DAILY THOUGHTS CONTINUED:

I’m testing the theme now on mobile emulation with chrome dev tools and I’m getting really inconsistent behavior.
I got things working okay with the default frontity test server API but when I try to test stuff with my own website blog at jackalope.tech/blog I get weird stuff like this.

EDIT:

Actually I fixed this. Was a problem with my code blocks not properly wrapping!

I encountered some inconsistencies when I was testing compatibility with my website json api source but the problems have been magnified when I’m trying the chrome device emulation stuff and I can’t actually determine what is causing these problems.

One issue that is relevant to bring up is that it seems the frontity test server posts have all been written in 2016. This is a problem since Gutenberg is now the standard editor and it outputs different HTML than the classic editor did. (some of these issues have popped in my own normal WP development.)

In line with that I would suggest you guys consider creating a new test blog that will have more full compatibility with the Gutenberg editor.

That of course isn’t going to fix this problem for me. I have no clue what’s causing it. I’m going to investigate this the best I can but thought I should drop a note by you guys since I can only see the disjunction between the test wp json and the evolution of the modern default editor growing.

Also I keep having this happen and I have no clue why. The only way to fix it is to go to put a “/” in the url and then it will load the front page correctly. But clicking stuff won’t work.

thedonquixotic · 29 October 2019 00:34

Also a suggestion/request. Would it be possible to not have the babel output generate all the various browser variations when in dev mode? It makes it a lot more tedious to actually look through chrome dev tools when there’s like 4 different variations of the same css property.

thedonquixotic · 1 November 2019 22:32

DAILY THOUGHTS CONTINUED:

I got page transitions to work yay!

But also lazy loading is still janky and a lot of the times doesn’t work properly which ends up making the website glitch out. Not so great

Performance on the transitions is also kinda slow. Not really sure how to deal with that.

thedonquixotic · 4 November 2019 19:11

DAILY THOUGHTS CONTINUED:

Transitions are only slow when run in dev mode. In production it works fine.

Weird way it’s slow is that it will begin to transition, then stop, and then if you click it will move a couple of keyframes. So you have to kinda keep clicking over and over again to get it to finish. I imagine this has to do with some kind of disconnect between the animation state and React understanding when to update the DOM?

David · 13 November 2019 09:59

That sounds bad. Is there any way we can reproduce it to know if it is a bug?.

Can you share some of your code? I don’t know where the problem could be but we can still try to help you. Maybe it is related to the event handlers you are using for the transition.

thedonquixotic · 14 November 2019 18:50

I’m not entirely sure but I’m pretty sure this issue was fixed once I passed the <FeaturedImage/> component a height prop (which I figured to do from looking at some updates that had been done to mars-theme. ) Once a height is preset for the images they pop in correctly. I think the issue was simply that if the image wasn’t there, space wasn’t given, and without space given you couldn’t scroll down far enough to trigger the lazyloader.

Also the issue with performance seems to have been fixed once I refactored that app loading to look more like the changes that had been made to mars-theme.

If you want to see my theme progress though you can check here: https://github.com/jcklpe/desert-jackalope

thedonquixotic · 27 November 2019 06:18

So I actually just tried it on a different machine but found that now it’s having trouble again with the loading in pictures. I’m not sure why. Pretty sure these are the same versions of the theme I was working on.

Here’s a link to a test server: https://hire-me.jackalope.tech/

David · 28 November 2019 10:04

Are you using Google Chrome? I mean, there was a bug with Chrome’s native lazy loading, forcing images to have a height property in order to work as expected. Is it possible that the problem you experienced was that? Do you have the same browser version in both machines?

It’s looking awesome, by the way.

David · 28 November 2019 10:27

Uhm, looking into your code I see the <FeaturedImage> component has a relative height of 100% of the parent’s height, which is the <Absolute> component that you are using in index.js. But, that component hasn’t got any height and that can cause problems too , so I think you should set a specific height for the <FeaturedImage> component.

I’ll take a closer look at the code later, in case there are other little things that could be fixed.

Try that and keep telling us about your progress. Cheers!

thedonquixotic · 30 November 2019 07:27

Hmm unfortunately that doesn’t seem to be fixing the image not popping in issue:

Thats with the image css set to 300px.

David · 4 December 2019 16:35

I’ve been testing in my local environment and I can’t reproduce the error. Uhm. Have you noticed if it happens in certain circumstances? Or it happens randomly instead?

BTW, you could share the output of the npx frontity info command (executed in your frontity project), in case the bug was related to a specific environment or something. This is my output:

## System:
 - OS: macOS Mojave 10.14.6
 - CPU: (4) x64 Intel(R) Core(TM) i3-6100 CPU @ 3.70GHz
 - Memory: 56.64 MB / 8.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
 - npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
## Browsers:
 - Chrome: 78.0.3904.108
 - Firefox: Not Found
 - Safari: 12.1.2
## npmPackages:
 - @frontity/core: ^1.4.0 => 1.4.0 
 - @frontity/html2react: ^1.1.14 => 1.1.14 
 - @frontity/tiny-router: ^1.0.17 => 1.0.17 
 - @frontity/wp-source: ^1.4.2 => 1.4.2 
 - desert-jackalope: file:packages/desert-jackalope => 1.3.0 
 - frontity: ^1.4.2 => 1.4.2 
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found

Also, in case you are using Google Chrome, could you check what values are set in chrome://flags for the lazy loading flags?

thedonquixotic · 31 January 2020 01:57

Work Diary:

I’m back to doing some work on this project.

Right now I’m taking what I can observe from the Chakra theme and using that to try and adjust my theme to have defaults that can also be overriden by the frontity.settings.js file.

I added the following to state:

  state: {
    // State is where the packages store their default settings and other
    // relevant state. It is scoped to the "theme" namespace.
    theme: {
      menu: [],
      isBlog: false,
      colors: {
        primary: {
          default: "#2657eb",
          heavy: "#1f38c5"
        }
      }
    }
  },

The isBlog is simply a mode that tells whether or not the website should be presented as a blog (which means that it presents author name and date information on posts and eventually will have very different styling for the archive page)

I’m having a bit more trouble getting the color stuff to work.

Chakra passes it’s primary colors etc down as props but I think that’s messy looking and I’d prefer to pass stuff from state to a variable that gets set as a CSS variable.

So I currently have this:

const primaryColor= "green";

const globalStyles = css`


  :root {
    --primary-heavy: #1f38c5;
    --primary: ${primaryColor};
    --snappy: cubic-bezier(0.075, 0.82, 0.165, 1);
    --heavy-snap: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }
}

And that works. But I want to pass the const primaryColor from the state but I’m not sure how to connect the two?

Instead of const primaryColor = "green" I need to use const primaryColor = state.theme.colors.primary.default but that’s not working.

I know this is probably a super basic problem but this is a good example of how I’m still learning how the whole declarative aspect of React works.

When I try setting const primaryColor = state.theme.colors.primary.default I get a “state doesn’t exist” error.

I feel like that must be because the theme javascript object in src/index.js must not be getting passed to it. So do I need to import it or something?

Why does it work though when I use {isBlog && <dateComponent/>} though? Components get passed the state via the arrow function in the src/components/index.js but I’m not sure how to pull the state into that file without using the arrow function so that it can be accessed via the styled-components stuff?

Any suggestions?

EDIT 1:

Okay so I tried setting it like this:

const primaryColor = frontity.state.theme.colors.primary.default;

I’m using npx frontity dev and it works! I see the color change from the test "const primaryColor = “green”; to the proper setting which is blue.

But, if I refresh it breaks. That’s… weird.

EDIT 2:

Yeah… IDK what’s up with this. I can get colors to work by making a file called “theme.js” and putting an object in it that contains the necessary information

import { colors } from "../theme.js";

const primaryColor = colors.primary.default;

But I can’t get it to work by just directly referencing the stuff in the src/index.js file:

import desertJackalope from "../index";

const primaryColor = desertJackalope.state.theme.colors.primary.default;

Which is just a javascript object just like theme.js… so what’s the deal? Is this something specific to Frontity I’m missing?

thedonquixotic · 31 January 2020 02:06

Side comment:

Also man… I really need a better way to handle the component styling than just the emotion styled components way of doing things because it’s getting really dense and while styled components can do a lot of stuff that SCSS can’t do, vscode (even with the styled component extension) doesn’t properly lint or display nested css stuff and it makes complex styling kind of hard to follow.

thedonquixotic · 13 February 2020 07:00

I’ve found a partial solution to the component styling issue. I have started taking different parts and putting them in a separate js file and then importing them into the larger Article style component. this doesn’t fix the issues I have with vscode not properly linting or syntax hilighting the css. It seems that as long as emotion styled components doesn’t allow for the importing of scss files that this will simply be the way things have to be. Not a fan of that approach but it is what it is.

David · 13 February 2020 08:24

Hey, have you tried the vscode-styled-components extension for VSCode? I was using it and I found it useful. It’s just syntax highlighting for styled-components but it seems to work well with Frontity.