지난 며칠 동안 나는 정교한 교과서를 많이 읽었는데, 이제는 기본적인 테스트 항목을 작성하여 기본적인 개념을 초월할 때가 되었다.
나는 이곳에서 진전과 견해를 발표할 것이다.

에 관하여

며칠 전에 나는 기본적인 의존 관계 해석 알고리즘Gist을 찾았고 이를 Svelte에 대한 더 많은 학습의 기초로 삼기로 결정했다.기본적으로 이것은 지도 모델에 머무르는 것이 아니라 일을 하는 핑계이다.
Graph theory는 많은 현대 발전 모델의 핵심이고 나는 그것이 우수한 것이 될 것이라고 생각한다MacGuffin.

프로젝트 코드

CodeSanbox

Github

기능 / 서비스

👍 현재 일반 JavaScript 코드 샌드박스를 Svelte로 변환합니다.
👍 시퀀스 테이블을 사용하여 실행 순서를 포맷합니다.
👍 실시간으로 업데이트된 사용자는 의존 항목 목록을 편집할 수 있습니다.(왼쪽 열의 항목 추가/제거)
🔘 의존항의 자동 색 인코딩.
🔘 서스펜션 항목은 다른 곳에서의 용도를 강조 표시합니다(읽기 쉽도록 양방향 항목 강조 표시).
🔘 무한 중첩된 의존 단계를 추가합니다.
🔘 언어 수정...이전, 이후, 구독자, 프로젝트 등.
🔘 실시간 모드를 전환합니다.
🔘 종속성 편집기의 CodeMirror
🔘 변경 내용 실행 취소/재실행
🔘 읽기 package.json 또는 기타 종속 항목 설정 및 해상도 표시URL/fetch를 통해 업로드하거나
🔘 로컬 스토리지에 저장
🔘 json/파일 다운로드에 상태 저장
🔘 인증된 사용자
🔘 사용자 목록의 기본 CRUD 인터페이스
🔘 공유 종속성 목록
🔘 의존도 가시화
🔘 API-DRaaS(종속성은 서비스로 확인됨)

슬림한 컨셉을 담아야 돼요.

반응성

획득, 비동기식/대기

아이템

슬롯

제본

수명 주기

상점

동작 및 전환

국가 관리

출력 라이브러리의 기본

XState

개요

인증(oAuth 2.0)

Firebase(Cloudflare Workers KV 포함)

사용자 스토리지

Cloudflare Workers KV

탐색Durable Objects 옵션으로 제공

종속성 매핑을 위한 기본 CRUD 커넥터

API

진보하다

2020년 10월 21일

나는 의존항과 실행 순서 부분을 작은 구성 요소로 바꾸어 저장resolution을 추가하고 자동으로 구독함으로써 사용자의 입력에 따라 자동으로 업데이트할 수 있다.
CodeMirror를 추가할 계획입니다. 작은 모듈로 구현하는 것이 가장 좋다고 생각합니다.
CodeMirror를 Svelte로 간소화한 오래된 라이브러리를 찾았지만 Svelte 1에서 왔습니다.x. 더 이상 일하지 않고, 더 이상 유지하지 않습니다.그러나 슬림 모듈과 생명주기에 대해 더 많은 것을 알 수 있는 핑계를 제공하기 때문이다.

2020년 10월 22일

솔직히 말하면, 지금 나는 이미 Svelte의 몇 가지 기본 원리를 배웠고, 내가 더욱 흥미를 느끼는 것은 그것이 신분 검증을 거친 응용 프로그램으로서의 실용성이다.이것이 바로 내가 그것을 사용하는 방식이다.다시 말하면 로그인, 작업 (CRUD 등), 로그아웃할 수 있는 프로그램입니다.
그래서 지금 나는 공유기를 사용하여 Firebase 인증을 시도하고 싶다.그러기 위해, 나는 두 가지 선택이 있다. 나는 탐색하고 싶다...

기존 - 인증된 라우팅 및 API가 있는 노드 서버입니다.이 경우 Sapper.

Edgy(글자 그대로) - Cloudflare Workers, KV 및 HTMLRewriter 흐름 주입을 사용하여 더 높은 성능과 확장성으로 동일한 효과를 실현합니다.

나는 최근에 Ilia Mikhailov의 몇 편의 훌륭한 강좌를 읽었는데, 그것들은 직접 firebase auth w/ Svelte 또는 w/ XState 을 사용하여 설명하였다.
이제 저는 XState를 건너뛰고 더 직접적인 임무, 즉 Sapper, Cloudflare와 서비스 인원을 평가하는 데 중점을 두겠습니다.

2020년 10월 25일

Cloudflare에서 Sapper를 실행하는 것은 확실히 가능할 것 같습니다.이를 증명할 수 있는 GitHub 재구매 계약이 있습니다.

마루 / 날씬한 ssr 일꾼

이것은 Cloudflare Worker에서 슬림한 서버 사이드(SSR)를 보여주는 빠른 프레젠테이션입니다!

날씬한 ssr 일꾼

A quick demo for rendering Svelte server-side (SSR), but within a Cloudflare Worker!

Live Demo
Cloudflare Worker에서 슬림한 SSR을 얻는 방법을 설명하기 위한 프레젠테이션입니다.그것은 의도적으로 매우 작다. - 공식 svelte-template 을 확장했다.

설치

$git 클론https://github.com/lukeed/svelte-ssr-worker
날씬한 ssr 일꾼
$npm 설치

스크립트

다음은 프로젝트에 포함된 npm 스크립트입니다.
그것들은 명령줄의 npm run <name> 를 통해 호출된다.예: npm run build:dom.

건축하다

이것은 순차 실행 build:dom 과 build:ssr 스크립트의 별명입니다.

Note: These are sequential because build:ssr imports the public/index.html that build:dom produces.

생성:dom

src/index.dom.js 입구점을 사용하여 생산 구축 클라이언트를 구축합니다./public 디렉터리의 모든 파일은 프런트엔드 클라이언트 응용 프로그램을 구성합니다.

Important: These must be uploaded to a storage bucket and made available on a CDN location.
Alternatively, you may upload…

View on GitHub
나는 또 Svelt의 subreddit에서 재미있는 svelte/firebase/cloudflare 프로젝트를 발견했다. https://www.reddit.com/r/sveltejs/comments/gt16s8/new_side_project_saas_built_with_svelte_open_demo/

2020년 10월 27일

프로젝트에서 벗어났지만 현지에 사퍼를 설치하고 그를 알게 되었다.기본 기능 외에 Sapper와 Svelte의 특징 중 하나는 Client와 Server 구성 요소 API 간의 차이이다.

Sapper에서 어셈블리 설치에 가져오기 집중

텍스트 입력이 있는 경우 DOM에 초점을 맞추십시오.
Svelte (w/out-Sapper) 에서 onMount 방법을 추가하고 bind:this={inputElement} 를 사용하여 요소를 변수에 연결한 후 초점을 맞춥니다.See example(내 거 아니야)
Sapper에서는 이 기능이 작동하지 않습니다. 왜냐하면Sapper API explains:

Unlike client-side components, server-side components don't have a lifespan after you render them — their whole job is to create some HTML and CSS. For that reason, the API is somewhat different.

나는 이 통찰력을 어떻게 사용해서 Mount 효과의 초점 입력을 완성하는지 아직 잘 알지 못했다.
나의 최초의 조사는 구성 요소 프로세서 handleFocus 를 호출하고 작업할 수 있는 단독 단추를 만드는 것이다.단추를 눌렀을 때 요소가 초점을 맞춥니다.그러나 우리는 자동으로 초점을 맞춰야 한다on:click.
현재 문제는 Sapper 응용 프로그램에서 이 점을 어떻게 실현하는가이다.
전략에 대한 나의 두 가지 초보적인 생각은 다음과 같다.

날씬한 방식™ (알 수 없는atm)

어떤 유형의 전통적인 DOM 이벤트 탐지기가 Sapper 모드에 들어갔다.(가장 바람직하지 않은 선택)

현재 나는 정말 아무것도 그것을 필요로 하지 않지만, 클라이언트와 서버 측의 가벼운 구성 요소 간의 근본적인 차이에 대한 중요한 견해를 제공하기 때문에 그것을 현안으로 삼는 것을 좋아하지 않는다.
내가 그것을 가지고 있을 때, 나는 더 많이 발표할 것이다.

미스터리 풀기 (잠시 후 커피 한잔)

onMount 각종 원인으로 인해 고의로 작용하지 않는다.focus().다음은 Rich의 설명입니다.

평론 #619

Rich-Harris
의견 Apr 07, 2019
이것은 a11y-네비게이션에 적용될 때 초점이 리셋되어야 합니다 (이것도 onMount 속성을 사용하지 않는 이유입니다): https://github.com/sveltejs/sapper/blob/master/runtime/src/app/app.ts#L154
포커스 재설정은 탐색 후에 발생하므로 autofocus 에서 포커스를 설정하면 유효하지 않습니다.만약 당신이 정말로 입력에 관심을 가져야 한다면, onMount 필요한 것이지만, 이상적인 경우, 나는 a11y 준칙을 위반하지 않는 대체 방안이 있는지 시험해 볼 것이다.
View on GitHub

커피 한 잔 고마워요.