https://github.com/preactjs/preact/ <

스타일 처리에서 막힘: <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="h

<a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github

preact 쓰기 about just-news HOT 2 CLOSED

disjukr commented on July 30, 2024

preact 쓰기

from just-news.

Comments (2)

disjukr commented on July 30, 2024

스타일 처리에서 막힘: 6f5011a

웹팩의 style-loader는 스크립트(just-news.user.js)가 로드되면 곧바로 <head> 태그를 찾아서 <style> 태그를 주입시킨다: https://github.com/webpack-contrib/style-loader/blob/5ddb01bdce5f906479f5bb3a2664f0684931b6e4/src/addStyles.js#L254

그런데 just-news의 기존 reconstruct 동작이 문서를 재구성하면서 <head>태그의 내용을 전부 지워버린다(이 때 style-loader가 주입한 <style> 태그가 같이 사라짐):

just-news/src/reconstruct.ts

Lines 36 to 45 in 6f5011a

    
               let root = document.createElement('html'); 
        
               document.replaceChild(root, document.documentElement); 
        
               root.innerHTML = ` 
        
           <head> 
        
               <meta charset="utf-8"> 
        
               <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> 
        
               <title>${ article.title || 'just-news' }</title> 
        
           </head> 
        
           <body> 
        
           </body>`;

이 동작을 우회하려면 style-loader가 just-news의 reconstruct 동작을 기다린 다음 <style>을 주입해야하는데, 이걸 구현하려면 style-loader를 직접 만들어야 할 것 같다.

from just-news.

disjukr commented on July 30, 2024

69fd9c7
일단 스타일은 기존대로 reconstruct에서 처리하도록 두고 이슈 분리함

from just-news.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TensorFlow

An Open Source Machine Learning Framework for Everyone

Django

The Web framework for perfectionists with deadlines.

Laravel

A PHP framework for web artisans

D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

web

Some thing interesting about web. New door for the world.

server

A server is a program made to process requests and deliver data to clients.

Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

Visualization

Some thing interesting about visualization, use data art

Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.

Microsoft

Open source projects and samples from Microsoft.

Google

Google ❤️ Open Source for everyone.

Alibaba

Alibaba Open Source for everyone

D3

Data-Driven Documents codes.

Tencent

China tencent open source team.

	let root = document.createElement('html');
	document.replaceChild(root, document.documentElement);
	root.innerHTML = `
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
	<title>${ article.title \|\| 'just-news' }</title>
	</head>
	<body>
	</body>`;

Comments (2)

Related Issues (20)

Recommend Projects

Recommend Topics

Recommend Org