Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: Feature: Add setting to ignore components #136

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
Open

WIP: Feature: Add setting to ignore components #136

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
7eb709f
wip
KevinBatdorf Dec 21, 2020
b74bf5f
wip
KevinBatdorf Dec 21, 2020
db3f994
wip
KevinBatdorf Dec 21, 2020
4f4fb22
fix spelling error
KevinBatdorf Dec 21, 2020
53c4975
add input
KevinBatdorf Dec 22, 2020
3b776fc
add body id
KevinBatdorf Dec 22, 2020
450ce70
update
KevinBatdorf Dec 22, 2020
0703ea6
merge master
KevinBatdorf Jan 9, 2021
953bf07
wip
KevinBatdorf Jan 10, 2021
b86cfde
close panel by default
KevinBatdorf Jan 10, 2021
7edd198
Merge branch 'master' into feature/add-setting-to-ignore-components
KevinBatdorf Jan 23, 2021
9534c78
wip
KevinBatdorf Jan 23, 2021
d3a6c55
merge in master
KevinBatdorf Jan 31, 2021
f71a464
fix errors
KevinBatdorf Jan 31, 2021
bf41516
fix errors
KevinBatdorf Jan 31, 2021
fbb7a0d
add settings functionality
KevinBatdorf Jan 31, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion lib/edge/render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@ import path from 'path'
import * as edge from 'edge.js'
import VerbatimTag from './VerbatimTag'

const viewData = {
devOnly: process.env.NODE_ENV !== 'production',
}
edge.registerViews(path.join(__dirname, './packages/shell-chrome/views'))
edge.tag(new VerbatimTag())

export function renderView(view, outputFilename, outputPath) {
let contents = edge.render(view)
let contents = edge.render(view, viewData)
let dir = outputPath || path.join(__dirname, './dist/chrome')

if (process.env.NODE_ENV === 'production') {
Expand Down
1 change: 0 additions & 1 deletion packages/shell-chrome/src/devtools/devtools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ export default function devtools() {

themes: themes,

settingsPanelEnabled: process.env.NODE_ENV !== 'production',
settingsPanelOpen: false,

get isLatest() {
Expand Down
1 change: 0 additions & 1 deletion packages/shell-chrome/views/_partials/header.edge
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@
<button
data-testid="settings-panel-open-button"
class="hover:opacity-75 focus:outline-none"
x-show="settingsPanelEnabled"
@click="settingsPanelOpen = true"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current w-5 h-5">
Expand Down
49 changes: 0 additions & 49 deletions packages/shell-chrome/views/_partials/settings.edge
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions packages/shell-chrome/views/panel.edge
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</style>
</head>

<body class="antialiased">
<body id="devtools-container" class="antialiased">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@HugoDF It doesn't seem like this is hurting anything, but is there something I'm maybe missing?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there isn't but it might work out better to use testid's on the "root panel components" we want to inject in the simulator (see #136 (comment))

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just realized the map is only run in the simulator anyway, so it's not necessary here regardless.

<div x-data x-show="false" class="preload">Devtools loading...</div>

<div id="app" class="h-full" x-cloak x-data="devtools()" x-init="init()" x-spread="devtoolsRootDirectives()">
Expand Down Expand Up @@ -91,7 +91,7 @@
</div>
</div>

@include('_partials.settings')
@include('settings.index')
</div>
</div>
<script src="./panel.js"></script>
Expand Down
67 changes: 67 additions & 0 deletions packages/shell-chrome/views/settings/index.edge
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<div
data-testid="settings-panel"
x-show="settingsPanelOpen"
class="inset-0 absolute flex flex-col items-center justify-center z-max"
>
<div class="absolute bg-alpine-400 opacity-30 inset-0"></div>
<div class="p-4 flex-1 flex items-center justify-center w-full relative z-50" @click="settingsPanelOpen = false">
<div
x-show.transition.in.opacity="settingsPanelOpen"
class="bg-white w-full h-full p-4 shadow-lg border border-silver-400 relative"
@click.stop
>
<button
data-testid="settings-panel-close-button"
class="absolute top-0 right-0 focus:outline-none block"
@click="settingsPanelOpen = false"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
class="text-black absolute top-1 right-1 w-5 h-5"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
<div
x-data="{
pages: [
{
name: 'Preferences',
enabled: true,
},
{
name: 'Experimental',
enabled: {{ devOnly }},
}
].filter(p => p.enabled),
active: 'Preferences'
}"
class="flex space-x-4"
>
<div>
<h2 class="text-lg font-light">Settings</h2>
<nav class="flex flex-col items-start text-sm mt-3 text-cool-gray-500 space-y-1">
<template x-for="page in pages" :key="page.name">
<button
x-text="page.name"
class="focus:outline-none border-l-8 pl-2 border-transparent"
:class="{ 'border-ice-500': active === page.name }"
@click="active = page.name"
></button>
</template>
</nav>
</div>
<div class="flex-grow">
@each(page in ['Preferences', 'Experimental'], include = 'settings/pages/' + page.toLowerCase())
@endeach
</div>
</div>
</div>
</div>
</div>
6 changes: 6 additions & 0 deletions packages/shell-chrome/views/settings/pages/experimental.edge
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div x-show="active === 'Experimental'">
<div class="w-full border-b border-cool-gray-200 mb-4 pb-2">
<h3 class="text-2xl font-light">Experimental</h3>
</div>
<div>Nothing to see here!</div>
</div>
26 changes: 26 additions & 0 deletions packages/shell-chrome/views/settings/pages/preferences.edge
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<div x-show="active === 'Preferences'">
<div class="w-full border-b border-cool-gray-200 mb-2 pb-2">
<h3 class="text-2xl font-light">Preferences</h3>
</div>
<div class="lg:grid grid-cols-3">
<div>
<h2 class="uppercase text-sm font-medium mb-3 text-cool-gray-500">Visibility</h2>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Hidden components</label>
<div class="mt-1">
<input
type="text"
autocomplete="off"
name="hide-component"
class="p-0.5 px-2 shadow-sm focus:ring-ice-500 focus:border-transparent block w-full sm:text-xs border-gray-300 rounded-md placeholder-cool-gray-400"
placeholder="[x-devtools-ignore]"
aria-describedby="hide-component-description"
/>
</div>
<p class="mt-1 text-xs text-gray-500" id="hide-component-description">
Hide components using the above selector.
</p>
</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion packages/simulator/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export async function injectPanel(containerNode) {
// this contains all sorts of CSS tags etc
containerNode.innerHTML = rawPanelHtml
// keep only the Alpine components in the panel
const panelAppHtml = Array.from(containerNode.querySelectorAll('[x-data]'))
const panelAppHtml = Array.from(containerNode.querySelectorAll('#devtools-container > [x-data]'))
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thinking this will only work on the simulator. Will see what i can do. It's otherwise duplicating the settings page.

Copy link
Collaborator

@HugoDF HugoDF Dec 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about adding data-testids to the panel "root" components, data-testid="panel-root" maybe?

Would have to be added to both

alpinejs-devtools/packages/shell-chrome/views/panel.edge

Line 16 in 3b776fc

<div x-data x-show="false" class="preload">Devtools loading...</div>

and

alpinejs-devtools/packages/shell-chrome/views/panel.edge

Line 18 in 3b776fc

<div id="app" class="h-full" x-cloak x-data="devtools()" x-init="init()" x-spread="devtoolsRootDirectives()">

Should keep the selectors simpler and it matches our use-case (we're selecting using the testid's for dev/testing purposes only)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated now if you want to check it

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me

.map((el) => el.outerHTML)
.join('\n')

Expand Down